Can't run site on localhost - Invalid hook call

🙋Get Help
#1

Hi,

I buildt the site hostwp.no, and published it about 2 weeks ago, since then, i havent touched the code. Today i wanted to do some adjustments, but I can’t start the site in localhost. I get this error:

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 (webpack-internal:///./node_modules/react/cjs/react.development.js:324:911)
      at useRef (webpack-internal:///./node_modules/react/cjs/react.development.js:327:727)
      at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:16:70)
      at processChild (webpack-internal:///./node_modules/@frontity/core/node_modules/react-dom/cjs/react-dom-server.node.development.js:443:2321)
      at resolve (webpack-internal:///./node_modules/@frontity/core/node_modules/react-dom/cjs/react-dom-server.node.development.js:442:122)
      at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/@frontity/core/node_modules/react-dom/cjs/react-dom-server.node.development.js:484:1233)
      at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/@frontity/core/node_modules/react-dom/cjs/react-dom-server.node.development.js:484:55)
      at renderToString (webpack-internal:///./node_modules/@frontity/core/node_modules/react-dom/cjs/react-dom-server.node.development.js:528:132)
      at render (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/capabilities/render-method.tsx:12:318)
      at serverSideRendering (webpack-internal:///./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts:29:15)

This is the react tree in the project, can this have anyting to do with it?

image

Does anyone have a solution to this?

#2 
You might have more than one copy of React in the same app

I think there is more than one react in your project. I see [email protected] (from react-mailchimp-form) and also [email protected] (from @frontity/core).

Can you try running npm update to see if it resolves the issue?

If not try temporarily uninstalling MailChimp with npm uninstall react-mailchimp-form.

1 Like
#4

Hi @kasper,

Yes, I think @juanmtorrijos is pointing you in the right direction. Can you try what he suggests?

Sometimes a clean reinstall of the packages in the project can help. You can try to do (from the root of your project) something like…

rm -rf node_modules && rm -rf package-lock.json && rm -rf yarn-error.log && rm -rf yarn.lock && npm cache clean --force && npm i
#6

Hi @juanmtorrijos and @juanma .

Removing the packages in question fixes the problem, after i deleted the node_modules and package.lock. And then npm install. But, what do I do if i want the packages? Because if I install them, the same thing happens again.

#7

HI @kasper, I think @juanma’s solution should work. Removing node_modules and then installing all packages back should do the trick.

#8

Hi @juanmtorrijos,

Don’t know if I didn’t make it clear anough in my previous answer, but I have already done that a couple of times. Do you or @juanma have any other solutions? :slight_smile:

#10

Hi @juanma and @juanmtorrijos,

I made a quick video to show the error. Sorry for the bad sound!

#11

Hi @kasper

Can you please provide a repo or code-sandbox with your code? This is especially helpful to find solutions of technical issues with specific code

Also, can you please specify the name of the package that is causing this Internal Error? Have you tried installing this package in a “clean” Frontity project (npx frontity create clean-project)

#13

Hi @juanma

I just created a new project, and changed noting. First maked sure that it worked, which it did, then i installed lottie-react, same problem occured. So I deleted node_modules and package lock, and removed the lottie-react dependency, and everything worked again when i ran npm install. I then tried the same thing with react-mailchimp-form, and the same error occured. That was in a completely clean install. That must mean that there is something wrong?

Do you still need a repo?

#14

No. Let me check this according to your instructions

#16

Did you find anything, @juanma ? :smiley:

#17

I think I know where the problem is. I think it’s related to this…

In the way Frontity works the installation of the packages must be done only from the root of the project. If you want to add a new NPM package to your Frontity theme/package you can add the dependency to the package.json of your theme/package and execute npm install from the root of the project (this will take care of installing the dependencies of the main project and those local packages used in the project)

We have defined this Feature Discussion to try to avoid this issue automatically

Regarding this, we have created an issue to have a look at it and try to provide a better explanation on this → Explain better how to add a NPM package to a theme/package · Issue #278 · frontity/docs · GitHub

Feel free to comment on the issue to add any specific information you
missed from the docs so we can take it into account when we work on this.

So summarizing, to solve any issue w/ dependencies you may have now, the following command executed from the root of your project should solve the issues

rm -rf node_modules && rm -rf **/node_modules && rm -rf package-lock.json && rm -rf yarn-error.log && rm -rf yarn.lock && npm cache clean --force && npm i

And to add new dependencies to your custom theme, just add the dependency in the package.json of the them and execute npm install from the root of the project

Deployment issue with Vercel
#19

Hi @juanma ,

I know that you have to add the packages to to root package.json, and that you have to be in the root folder when you run npm install. I have never tried to install a package in any other location.

This problem is still something that I experience. Here is my repo, just try to clone it and run npm install and then npx frontity dev. Do you get the same react error as I do?

#20

I have the same error with react-glider package

#21

Hi @kasper and @prainua!

So, I’ve cloned your repo @kasper and I can run it successfully without any react hooks errors. Truth be told, I had to comment out some code to show only the <HomePage /> since it returns 404 right now.

But regardless of the above, the multiple React copies can be solved with the suggestion from here: Support for React 17 · Issue #29 · Gamote/lottie-react · GitHub.

npm i lottie-react --force

Let us know if this fixed it.