How to make Next.js "see" the react-dom package?

Question

This is my first ever Next.js project, and I encountered an odd obstacle. Even though I made sure at least 3 times that I have react-dom and react installed and up-to-date, during next, next build or next run the process aborts with the message:

The module 'react-dom' was not found. Next.js requires that you include it in the 'dependencies' of your 'package.json'. To add it, run 'npm install --save react-dom',

Error: Cannot find module 'react-dom/server',

and:

Error: > Build failed because of webpack errors.

Reading on similar problems, I did a couple of things suggested that actually fit my problem, like removing node_modules and doing yarn, reinstalling react-dom and react, but none of these helped. Deploying on Now.sh (on which I'm planning to deploy this site) also returns with an error.

This is my package.json:

{
  "dependencies": {
    "next": "^9.0.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

I really made sure the result should be the browser opening my project on localhost:3000, but all of the Next.js commands that could make or lead to making this happen abort. Any ideas? Don't hesitate to ask for more code.

Misadventure

Looks like the library was not installed correctly. Do you see a folder named react-dom under node_modules? I assumed your file imports other libraries other than react-dom. Is this the only library that you got this error? – Misanthropy

did the previous comment help you ? If not, can you show your project folder's structure ? – Essential

@YingZuo I checked into the node_modules directory; react-dom's definitely there. @GaëlS my folder structure – Misadventure

That's very strange. I don't know what can go wrong. I can take a look if you check in your code somewhere. – Misanthropy

@YingZuo initializing a new project fixed this, maybe this was a one-time bug or something. – Misadventure

Answer 1

var ReactDOM = require('react-dom'); 

Then, do

console.log(ReactDOM)

to see specifically what sort of errors you will have on the console.

Miru