Next.js: Problems when Next is installed globally and you want to use react alpha version with hooks.

[jon64digital]

Bug report

Describe the bug

When you have Next globally installed by NPM it doesn't build properly when trying to use the latest alpha of React and React-dom with hooks.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1) NPM install -g next
2) Use create-next-app to create a skeleton app
3) Edit package.json to upgrade react and react-dom to v16.8.0-alpha.1
4) Edit your index file to add a very basic useState example to it (use the counter example from react website).
5) Type "next dev" in your console.

Next and webpack give lots of errors saying that modules "react" and "react-dom" are missing. It tells you to install them into your project even though they are already installed.

6) Install react and react-dom globally using npm
7) "next dev" again

This time the site will run but you'll get an "Invariant Violation" and an error message explaining that hooks can only be used within the body of a functional component".

Expected behavior

The NEXT documentation says this...

"To deploy, instead of running next, you want to build for production usage ahead of time. Therefore, building and starting are separate commands:

next build
next start"

But if you do that you get "Next is not recognized as an internal or external command". So you have to install globally, leading to the problems above. I would expect Next to use the versions of react and react-dom installed inside the project when building, even if Next is installed globally.

After much wrangling I realised that I could get it running by not calling "next dev" correctly but by calling "npm run dev" instead. I hadn't tried this because I thought they would do exactly the same thing. If that is the correct way to do it then maybe the docs could explain that "next dev" should not be called directly from the command line?

System information

• OS: Windows
• Version of Next.js: 7.0.2

[exogen]

You shouldn't install Next globally, it should be a dependency of the same project where react and react-dom are installed. Since Next will be trying to import react and react-dom, it would get the wrong instance if they're only installed in a separate, non-global directory, due to the way module resolution works.

The commands next build and next start make the assumption that next is available on your $PATH. Some people add ./node_modules/.bin to their $PATH to make this easier. Another way is to run them from npm scripts, which will automatically have the correct $PATH.

I usually do this:

"scripts": {
  "build": "next build",
  "start": "NODE_ENV=production next start",
  "start:dev": "next dev"
}

Then you can run npm run start, npm run build, npm run start:dev, etc.

[jon64digital]

Yes, I know that works and it's how I solved my problem, but not until I'd gone through two days of pain trying to work out why nothing would work.

I posted it because I thought it may be possible for Next to be changed so that it didn't happen. If that's not the case then maybe the documentation could be changed to save others from the same pain.

[Prottoy2938]

Also, if this problem persists, make sure your node modules packages are all installed. Try running npm install again.

[zebapy]

npm install didn't solve this for me but npm rebuild seems to have fixed it (also on windows)

[schhunheng]

@zebapy Thank so much, it works.

[Eriickson]

@zebapy eso también me ayudó, gracias!