react-storefront breaks just after install the magento connector

[pablolgarcia]

Bug report

react-storefront breaks just after install the magento connector

Just after install react-storefront and have it working on my local environment I installed react-storefront-magento2-connector and the site broke showing the error:
TypeError: Object(...) is not a function
at eval (webpack-internal:///./pages/api/index.js:6:89)
at apiResolver (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/api-utils.js:8:7)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DevServer.handleApiRequest (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:66:462)
at async Object.fn (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:58:580)
at async Router.execute (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/router.js:25:67)
at async DevServer.run (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async DevServer.handleRequest (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:32:504)
FetchError: invalid json response body at http://localhost:3000/api?_includeAppData=1 reason: Unexpected token I in JSON at position 0
at /Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/node-fetch/lib/index.js:272:32
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async Function.MyApp.getInitialProps (webpack-internal:///./pages/_app.js:134:17)
at async loadGetInitialProps (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/lib/utils.js:5:91)
at async renderToHTML (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/render.js:28:1446)
at async /Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:111:97
at async /Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:104:142
at async DevServer.renderToHTMLWithComponents (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:136:387)
at async DevServer.renderToHTML (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:137:610)
at async DevServer.renderToHTML (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/server/next-dev-server.js:36:578)
at async DevServer.render (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:74:255)
at async Object.fn (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:58:672)
at async Router.execute (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/router.js:25:67)
at async DevServer.run (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:68:1042)
at async DevServer.handleRequest (/Users/pablogarcia/Documents/projects/react.storef/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:32:504) {
type: 'invalid-json'
}

NOTE: I didn't change/add any configuration/file, just installed the connector and tested the site again.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. npm create react-storefront@latest --yes my-m2-app
2. cd my-m2-app
3. npm install react-storefront-magento2-connector
4. npm run dev

System information

• OS: macOS Catalina 10.15.5
• Browser: Chrome
• Version of React Storefront: Last

Thanks!
Pablo

[xac501]

I am having exact same problem with macOS Catalina. Did you find a solution to this?

[AngelBS]

Same issue here:

TypeError: Object(...) is not a function at eval (webpack-internal:///./pages/api/index.js:6:89) at apiResolver (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/api-utils.js:8:7) at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async DevServer.handleApiRequest (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:66:462) at async Object.fn (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:58:580) at async Router.execute (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/router.js:25:67) at async DevServer.run (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:68:1042) at async DevServer.handleRequest (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:32:504) FetchError: invalid json response body at http://localhost:3000/api?_includeAppData=1 reason: Unexpected token I in JSON at position 0 at /home/angelbs/my-m2-app/node_modules/node-fetch/lib/index.js:272:32 at runMicrotasks (<anonymous>) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async Function.MyApp.getInitialProps (webpack-internal:///./pages/_app.js:123:17) at async loadGetInitialProps (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/lib/utils.js:5:91) at async renderToHTML (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/render.js:28:1537) at async /home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:112:97 at async /home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:105:142 at async DevServer.renderToHTMLWithComponents (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:137:387) at async DevServer.renderToHTML (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:138:610) at async DevServer.renderToHTML (/home/angelbs/my-m2-app/node_modules/next/dist/server/next-dev-server.js:36:578) at async DevServer.render (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:75:160) at async Object.fn (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:58:672) at async Router.execute (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/router.js:25:67) at async DevServer.run (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:68:1042) at async DevServer.handleRequest (/home/angelbs/my-m2-app/node_modules/next/dist/next-server/server/next-server.js:32:504) { type: 'invalid-json' }

Steps to reproduce

Same as mentioned above

System information

• OS: Ubuntu 20.04.2 LTS
• Browser: Chrome
• Version of React Storefront: Last

[nir1212]

any update on that?
im having the same issue

[EduSantosBrito]

The problem is by default the API is using GraphQL, if your Magento doesn't have a /graphql route it won't work. I'm working on a POC to migrate to REST, but I don't have the proper documentation of every endpoint. Can anyone help me with that?

[feeh27]

The problem is by default the API is using GraphQL, if your Magento doesn't have a /graphql route it won't work. I'm working on a POC to migrate to REST, but I don't have the proper documentation of every endpoint. Can anyone help me with that?

@EduSantosBrito I believe this is not the problem, my Magento has GraphQl working and I'm still having an error.

In pages/api/index.js the code try import home from react-storefront-connector and it's is undefined.

import { home } from 'react-storefront-connector'

export default async function(req, res) {
  res.json(await home(req, res)) // home is undefined
}

I replaced all react-storefront-connector with react-storefront-magento2-connector and it worked.