Can't run site on localhost - Invalid hook call

[kasper]

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?

Does anyone have a solution to this?

[juanmtorrijos]

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 react@16.14.0 (from react-mailchimp-form) and also react@17.0.1 (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.

[juanma]

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

[kasper]

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.

[juanmtorrijos]

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

[kasper]

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?

[kasper]

Hi @juanma and @juanmtorrijos,

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

Frontity error

[juanma]

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)

[kasper]

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?

[juanma]

@kasper

Do you still need a repo?

No. Let me check this according to your instructions

[kasper]

@juanma

No. Let me check this according to your instructio

Did you find anything, @juanma ?

[juanma]

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

I am started getting error "TypeError: Cannot read property 'add' of undefined"

OK, I think I know what the problem is. Let me explain it in detail. According to the logs you shared, it looks like the error comes from a package inside the ./packages/isae-theme/node_modules folder. I guess that happened because you would have run npm install inside the ./package/isae-theme folder, thus installing frontity and its dependencies again in a new node_modules inside your package’s folder. The error then comes from a duplicated react-helmet-async package. In order to fix it, jus…

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

Detect "node-modules" under "packages" folder, remove them and launch reinstall from root

Description Some users are installing things under the folder of their package which creates a “node_modules” folder. When launching the project locally the project fails as there are confilcts between packages like in here Possible solution I suggest we detect if there is a “node_modules” folder under the packages folder, we remove it and we launch again automatically a install from roor when we detect this from commands dev & build We can lunch internally something like rm -rf node_modules…

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

[kasper]

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?

aamodtgroup/hostwp

[prainua]

I have the same error with react-glider package

[cristianbote]

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.

[santoshdevnath15]

Hi everyone, the same problem I also faced. After debugging for almost one week, I found that I have install html2react npm package for some reason.

Then I realised that frontity already uses @frontity/html2react

So this was overriding or something clashing. Haha. Not sure

Solution

• I have ran the command in terminal npm uninstall html2react

• Then ran another command in terminal npm update

Finally it is working.