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.