Invalid hook call makes it impossible to run this app

[matigda]

Bug report

Describe the bug

I was trying to play around with this storefront but when I run npm run dev I get info about invalid hook call: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ....

To Reproduce

Steps to reproduce the behavior:

1. npm create react-storefront@latest --yes react-storefront
2. cd react-storefront
3. npm run dev

I also tried with npm run build, but after npm start I get the same error.

Expected behavior

Working app :D

System information

• OS: Ubuntu
• Version of React Storefront: [don't know how to check it - I followed your guidelines so I assume it's the latest?]

[dijs]

I just followed your exact steps as stated above and received no errors.

Must be an environment issue.

Please let us know your:

• Ubuntu version
• Node version
• Installed RSF version from within node_modules

And do you receive the error during runtime?

[matigda]

Ubuntu: 18.04.5 LTS node: v14.13.0 react-storefront: 8.17.2

I receive this error only during runtime. npm run build works properly.

[matigda]

I also tried cloning and running this one directly: https://github.com/storefront-foundation/react-storefront-starter-app

but after running npm install I get No matching version found for [email protected]..

So actually there is no way for me to run this

[dijs]

I tried testing Node v14 and it worked as well.

Must be something related to Ubuntu.

[matigda]

I tested it on windows with node v12.18 and on second laptop with ubuntu 20 and node 15.0.1. It worked only on windows ^^ on second ubuntu machine I got the same error.

[abdelrhman-arnos]

I faced the same issue too on Ubuntu OS. npm: 6.14.6 node: 12.18.4 react-storefront: 8.11.0

[luke-denton-aligent]

I too am facing the same issue on Centos 7 npm: 6.14.4 Node: 12.16.1 react-storefront: 8.17.2

Receive the error when trying to load the UI. Running npm start, no errors appear, it's only when trying to navigate to the app in the browser that the errors appear on the console, and the browser just shows "Internal Server Error"

My steps were:

1. npm create react-storefront@^8.0.0 my-react-storefront
2. cd my-react-storefront
3. npm i react-storefront-magento2-connector

[renanviegas]

Same problem here.

Some missing packages:

npm install @emotion/react npm install @emotion/styled

Some issues from Material UI:

• The ExpansionPanel component was renamed to Accordion to use a more common naming convention.
• The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention.

So, have to change some lines in./node_modules/react-storefront/ExpandableSection.js:

var _ExpansionPanel = _interopRequireDefault(require('@material-ui/core/Accordion')); var _ExpansionPanelDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails")); var _ExpansionPanelSummary = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));

But, after that, still stucked in:

error - ./node_modules/react-storefront/link/Link.js:26:0 Module not found: Can't resolve '@material-ui/core/RootRef'

[visabhishek]

Facing Same Issue

[manaraph]

I am facing the same issue on MacOs Catalina 10.15.4 npm: 6.14.7 Node: 12.18.2

Receive the error when trying to load the UI. Running npm start, no errors appear, it's only when trying to navigate to the app in the browser that the errors appear on the console, and the browser just shows "Internal Server Error"

My steps were:

npm create react-storefront@latest --yes react-storefront cd react-storefront npm run dev

[mikkelsjolin]

I had the same issue on MacOS 10.15.7. It turned out to be due to my node version. I tried running the app with v. 10.x, 13.x, 14.x and 15.1.0.

Installing node version 15.1.0 fixed the issue for me ☺️

[manaraph]

I had the same issue on MacOS 10.15.7. It turned out to be due to my node version. I tried running the app with v. 10.x, 13.x, 14.x and 15.1.0.

Installing node version 15.1.0 fixed the issue for me ☺️

Ok @mikkelsjolin I will try Installing node version 15.1.0

[luke-denton-aligent]

I had the same issue on MacOS 10.15.7. It turned out to be due to my node version. I tried running the app with v. 10.x, 13.x, 14.x and 15.1.0.

Installing node version 15.1.0 fixed the issue for me relaxed

I'm not sure changing the node version is the solution here.. In package.json, the engines specification for node is >=8.10.0. As far as my understanding of this property is, this indicates that the library should work with node of that version and higher

[RomanRogut]

node v15.5.1 react-storefront: 8.17.4

my problem

when trying to render page

FetchError: invalid json response body at http://localhost:3000/api/cart?_includeAppData=1 reason: Unexpected token I in JSON at position 0

when trying going to http://localhost:3000/api?_includeAppData=1

browser just shows

Internal Server Error

[NeonMando158]

node v15.5.1 react-storefront: 8.17.4

my problem

when trying to render page

FetchError: invalid json response body at http://localhost:3000/api/cart?_includeAppData=1 reason: Unexpected token I in JSON at position 0

when trying going to http://localhost:3000/api?_includeAppData=1

browser just shows

Internal Server Error

The same issue faced on macOS Mojave (v10.14.6), Node Version: 12.16.3 Chrome : v87

Couldn't get the app up and running !!

[ikevinsolomon]

Facing the same issue on Mac OS X Node v14.15.3 cant get the UI running.

[zimmerx]

Same problem with Mac OSx..((( Sigh.... anyone? any solution? Hello?!

[ikevinsolomon]

@zsociety I feel you my man, i'm waiting for someone to answer too, i've tried all above suggestions.

[jasonadkison]

I'm unable to reproduce any of the issues being reported here. I'm using nvm and node v12.14.0, as currently specified in the .nvmrc file. I'm also running on macOS 10.15.6.

[gianpieropuleo]

I have the same problem, and it looks like in the dependency tree react-storefront is causing a duplicate, older version of React to be installed:

[phtmgt]

Me too. Big Sur M1.

I tried downgrading the main react version but it caused other issues.

[RishabhReactJS]

Facing same issue in macBook

[dijs]

I am trying to reproduce this error.

My specs:

MacOS Catalina (10.15.7)

So far, I have tried these steps:

npm create react-storefront@latest --yes react-storefront
cd react-storefront
npm run dev

on Node v8.17.0, v10.23.2, v12.16.1, and v14.15.4

v8 would not build

v10, v12, v14 built and ran just fine.

Any ideas where the difference could be?

[RishabhReactJS]

My system config is macOS Mojave v10.14.6. I have tried running on various node version like v10, v12, facing same issue, related to hooks. Please find the logs below.

`Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db (node:4893) ExperimentalWarning: The fs.promises API is experimental Defining routes from exportPathMap

Using connector react-storefront/mock-connector info - Using external babel configuration from /Users/Rishabh/Documents/code/test-react-storefront/.babelrc.js event - compiled successfully Ready on http://localhost:3000 event - build page: / wait - compiling... info - Using external babel configuration from /Users/Rishabh/Documents/code/test-react-storefront/.babelrc.js event - compiled successfully event - build page: /api wait - compiling... event - compiled successfully Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react/cjs/react.development.js:1476:13) at Object.useContext (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react/cjs/react.development.js:1484:20) at StylesProvider (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/@material-ui/styles/StylesProvider/StylesProvider.js:64:37) at processChild (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14) at resolve (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29) at renderToString (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27) at renderPage (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/next/dist/next-server/server/render.js:54:851) at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:116:22) at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19) at Function.MyDocument.getInitialProps (webpack-internal:///./pages/_document.js:126:83) at loadGetInitialProps (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/next/dist/next-server/lib/utils.js:5:101) at renderToHTML (/Users/Rishabh/Documents/code/test-react-storefront/node_modules/next/dist/next-server/server/render.js:54:1142) at process._tickCallback (internal/process/next_tick.js:68:7) event - build page: /next/dist/pages/_error wait - compiling... event - compiled successfully `

[phtmgt]

@dijs can you post 'yarn list' here?

[jayashleysmith]

Same problem for me, following the get started just results in invalid hook error and can't do anything.

Node version 15.5.0 Mac OS Big Sur 11.1

[rasmusbe]

Had the same problem, seems to be due to different react-version required in different packages.

npm is unable to dedupe everything but yarn solves it.

[jsantacruz87]

I fix my problem using the approach of "yarn resolutions" :

1. Run the command 'npm ls react' in a terminal, staying inside project folder. You should see the versions of React, in my case had 16.14.0 and 17.0.1 depending of what dependency you see.

2. Add the next lines in package.json at the same level of dependencies (I used version 17.0.1 because was the major version)

,"resolutions": {
  "react":"^17.0.1"
}

3. execute: "yarn install" , and then when it finish, just run "npm start", and it's all.

I hope help you

[cjrpriest]

I'm getting the same issue.

@dijs this might help in terms of recreating the problem in a container:

~ docker system prune -a 
~ docker run -p 3000:3000 -it node /bin/bash  
root@36cbf7fe4dee:/# docker run -p 3000:3000 -it node /bin/bash
Unable to find image 'node:latest' locally
latest: Pulling from library/node
1e987daa2432: Pull complete
a0edb687a3da: Pull complete
6891892cc2ec: Pull complete
684eb726ddc5: Pull complete
b0af097f0da6: Pull complete
154aee36a7da: Pull complete
49eae491bc0a: Pull complete
ae04268a0c2c: Pull complete
aee58d421568: Pull complete
Digest: sha256:9d27a32c9af4dc7a4e8405542ad246947ee6f491182cdc4916c747f5ca66a425
Status: Downloaded newer image for node:latest
root@94473a9e6649:/# npm create react-storefront@^8.0.0 myapp
Need to install the following packages:
  create-react-storefront@^8.0.0
Ok to proceed? (y)
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

Let's create a new React Storefront app! First, I need you to provide some information for package.json...

✔ version … 1.0.0
✔ description …
✔ repository url …
✔ author …
✔ license … UNLICENSED
✔ private … false / true
✔ Will you be deploying your app on the Moovweb XDN? … no / yes
✔ Create a directory for this app? … no / yes

✔ Downloading React Storefront template... done.
✔ Writing package.json... done.
✔ Installing dependencies... done.
✔ Copying resources... done.
✔ React Storefront app created.

To run your app:

  cd myapp
  npm start

To deploy your app for free on the Moovweb XDN, go to:

  https://moovweb.app

Happy coding!

npm notice
npm notice New patch version of npm available! 7.5.3 -> 7.5.6
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.5.6
npm notice Run npm install -g [email protected] to update!
npm notice
root@36cbf7fe4dee:/# cd myapp/
root@36cbf7fe4dee:/myapp# npm start

> [email protected] start
> npm run dev


> [email protected] dev
> cross-env NODE_ENV=development nodemon server.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
Defining routes from exportPathMap
> Using connector react-storefront/mock-connector
info  - Using external babel configuration from /myapp/.babelrc.js
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

> Ready on http://localhost:3000
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /api
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
Error: Invalid hook call. Hooks can only be called inside of the body of a function component....
<snip>

[jasonadkison]

I think the problem is the project template (used by the npm create react-storefront command) uses react 17 while react-storefront dependencies still use react 16.

+-- [email protected]
| +-- [email protected]
| | +-- [email protected]
| | | `-- [email protected] deduped
| | `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| |   `-- [email protected]
| `-- [email protected]
|   `-- [email protected] deduped

@cjrpriest if you downgrade react then the problem goes away. Give this a try: npm i -S react@^16.8.0 react-dom@^16.8.0 && npm start.

I think either this project needs to upgrade to react 17 or the template needs to go back to version 16.

 ~/Development  docker run -p 3000:3000 -it node /bin/bash
Unable to find image 'node:latest' locally
latest: Pulling from library/node
1e987daa2432: Pull complete 
a0edb687a3da: Pull complete 
6891892cc2ec: Pull complete 
684eb726ddc5: Pull complete 
b0af097f0da6: Pull complete 
154aee36a7da: Pull complete 
49eae491bc0a: Pull complete 
ae04268a0c2c: Pull complete 
aee58d421568: Pull complete 
Digest: sha256:9d27a32c9af4dc7a4e8405542ad246947ee6f491182cdc4916c747f5ca66a425
Status: Downloaded newer image for node:latest
root@d5f2b4d50d77:/# npm create react-storefront@^8.0.0 myapp
Need to install the following packages:
  create-react-storefront@^8.0.0
Ok to proceed? (y) y
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

Let's create a new React Storefront app! First, I need you to provide some information for package.json...

✔ version … 1.0.0
✔ description … 
✔ repository url … 
✔ author … 
✔ license … UNLICENSED
✔ private … false / true
✔ Will you be deploying your app on the Moovweb XDN? … no / yes
✔ Create a directory for this app? … no / yes

✔ Downloading React Storefront template... done.
✔ Writing package.json... done.
✔ Installing dependencies... done.
✔ Copying resources... done.
✔ React Storefront app created.

To run your app:

  cd myapp
  npm start

To deploy your app for free on the Moovweb XDN, go to:

  https://moovweb.app

Happy coding!

npm notice 
npm notice New patch version of npm available! 7.5.3 -> 7.5.6
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.5.6
npm notice Run npm install -g [email protected] to update!
npm notice 
root@d5f2b4d50d77:/# cd myapp 
root@d5f2b4d50d77:/myapp# npm start

> [email protected] start
> npm run dev


> [email protected] dev
> cross-env NODE_ENV=development nodemon server.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
Defining routes from exportPathMap
> Using connector react-storefront/mock-connector
info  - Using external babel configuration from /myapp/.babelrc.js
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

> Ready on http://localhost:3000
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /api
wait  - compiling...
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/myapp/node_modules/react-storefront/node_modules/react/cjs/react.development.js:1465:13)
    at useEffect (/myapp/node_modules/react-storefront/node_modules/react/cjs/react.development.js:1508:20)
    at useJssStyles (/myapp/node_modules/react-storefront/hooks/useJssStyles.js:11:24)
    at MyApp (webpack-internal:///./pages/_app.js:58:78)
    at processChild (/myapp/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/myapp/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/myapp/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/myapp/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/myapp/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at renderPage (/myapp/node_modules/next/dist/next-server/server/render.js:54:851)
    at Object.ctx.renderPage (webpack-internal:///./pages/_document.js:116:22)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:135:19)
    at Function.MyDocument.getInitialProps (webpack-internal:///./pages/_document.js:126:83)
    at loadGetInitialProps (/myapp/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/myapp/node_modules/next/dist/next-server/server/render.js:54:1142)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:94:5)
    at async /myapp/node_modules/next/dist/next-server/server/next-server.js:107:97
    at async /myapp/node_modules/next/dist/next-server/server/next-server.js:100:142
    at async DevServer.renderToHTMLWithComponents (/myapp/node_modules/next/dist/next-server/server/next-server.js:132:387)
    at async DevServer.renderToHTML (/myapp/node_modules/next/dist/next-server/server/next-server.js:133:522)
    at async DevServer.renderToHTML (/myapp/node_modules/next/dist/server/next-dev-server.js:34:578)
^C
root@d5f2b4d50d77:/myapp# npm i -S react@^16.8.0 react-dom@^16.8.0 && npm start

removed 2 packages, changed 3 packages, and audited 1146 packages in 4s

67 packages are looking for funding
  run `npm fund` for details

7 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> [email protected] start
> npm run dev


> [email protected] dev
> cross-env NODE_ENV=development nodemon server.js

[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node server.js`
Defining routes from exportPathMap
> Using connector react-storefront/mock-connector
info  - Using external babel configuration from /myapp/.babelrc.js
event - compiled successfully
> Ready on http://localhost:3000
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /api
wait  - compiling...
event - compiled successfully
event - build page: /api/session
wait  - compiling...
event - compiled successfully