Invalid hook call. Hooks can only be called inside the body of a function component

[OwenWheatley]

_"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."_

This error comes up after running npm start when attempting to view mate on localhost. npm run setup had been ran successfully and linked with contentful.

After reading the react-invalid-hook-call facebook provides and going through the steps they recommend. npm ls react-dom returns a version of react greater than 16.8.0 so it's not that the project is missing hooks.

When running npm ls react to check if there is a duplicate react within the project you can see that there is.

Maybe I'm wrong about this being a problem with the starter and it's my own development environment that is messed up but I haven't had any problems running other starters? Hoping someone can help with this ^.^

[EmaSuriano]

Hello @OwenWheatley did you make any changes in the codebase of the starter or just the basic setup?

[OwenWheatley]

Just did the basic starter, haven't changed the codebase. Even did a fresh gatsby new to double check.
Had a look to try and fix it and came across: facebook/react#13991
Adding this into the script:
"prestart": "npm-link-shared ./node_modules/<other package>/node_modules . react"
could help though I'm unsure of what to put in the section as I'm unfamiliar with link-shared.

Here are the stack frames that came up if that helps at all

Have you done a gatsby new of mate recently?

[OwenWheatley]

So after a morning of battling this issue, I've tried adding:
"prestart": "npm-link-shared ./node_modules/gatsby/node_modules . react",
to the start of the scripts to try and deal with the two reacts.

It looked like Gatsby had react in the package.json and then inside the node_modules of Gatsby is the Gatsby cli which inside of that has a package.json file also including react in it.
This seemed to have been why npm ls react returned the two reacts within the project.

So after then going into the gatsby cli package.json and removing react then doing npm i again it has removed this duplication so now npm ls react showed just one react within the project.

However when trying to run it the same error message persists.

Is anyone else able to try creating a new gatsby project with this starter to see what they run into? Just really want to confirm that this isn't just an issue for me.

[OwenWheatley]

So I've not been able to find anyone else who is up for running the mate starter (small circle I guess haha). I ran it on another computer I have and wanted to try this time doing it completely via the cygwin terminal as I noticed when you do
gatsby new mate-portfolio https://github.com/EmaSuriano/gatsby-starter-mate
It actually runs through the npm start scripts which includes attempting the sed which won't work in a windows terminal. I figured maybe this was why react was being duplicated? Apparantly not though as I still end up with:

After doing this I was still met with the same problem.

But with some more detail at least.

I'm not too sure where to go at this point but will keep trying, I'm looking into using npm-dedupe (https://docs.npmjs.com/cli/dedupe.html).

If anyone can provide any assistant or advice on what to go after that would be great. It would be nice to know if anyone else is having the same problem getting mate going :)

[EmaSuriano]

Hello @OwenWheatley, sorry for the huge delay! So I made a quick test by bootstrapping a new instance and besides the issues of the latest version gatsby-source-contentful when it installs a different version from the one inside package-lock.json it works perfectly in my computer.

Do you still have the same issues?

[OwenWheatley]

What OS are you on? What is the issue with the latest version of gatsby-source-contentful that you speak of? Is there something else besides what is in the readme that I must do for the setup.

I am afraid I am still having the same issue... =/

[EmaSuriano]

I'm using macOS Mojave and I tried in a Windows 10 machine using Git bash as the terminal. In both cases, it worked 🤔

Btw, I just merged a new pr (#90) where I changed the package manager from npm to yarn. This change may have fixed your issue, can you please try again? 😄

[OwenWheatley]

Hmm just tried this using yarn and it didn't work.. Just to check what you've said in the docs matches, there it says to make sure the package manager is npm but then here you have changed to yarn?

What is the issue with the latest version of gatsby-source-contentful installing a different one that you mentioned further up? Is there anything further there that I need to do when bootstrapping a new instance?

[EmaSuriano]

Hello, I removed the warning from the docs because now it's not necessary :)

The issue with gatsby-source-contentful and gatsby is tracked in this issue.

Do you still have the react version issue or is it different now?

[OwenWheatley]

Haven't had chance to go much further into it but I still had the issue. I'll just try hosting it and should be fine :D Probs spin up a linux vm to try it out. Thanks for all your help so far :)

[conspireagency]

I've run into some weird issues with this happening in Gatsby. If it comes up again for anyone, you might want to try deleting .cache, node_modules, public folders and package-lock.json. Then run a full npm install again before firing Gatsby back up.