Ask questionsProblems when Next is installed globally and you want to use react alpha version with hooks.

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.

  1. Install react and react-dom globally using npm
  2. "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

Answer questions 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.

Github User Rank List