Error: Cannot find module 'react-dom/server.browser'

Question

I have these dependencies in package.json:

  "dependencies": {
    ...
    "@builder.io/partytown": "^0.5.4",
    "@mantine/core": "^4.2.5",
    "@mantine/dates": "^4.2.5",
    "@mantine/dropzone": "^4.2.5",
    "@mantine/form": "^4.2.5",
    "@mantine/hooks": "^4.2.5",
    "@mantine/modals": "^4.2.5",
    "@mantine/next": "^4.2.5",
    "@mantine/notifications": "^4.2.5",
    "@mantine/prism": "^4.2.5",
    "@mantine/rte": "^4.2.5",
    "@mantine/spotlight": "^4.2.5",
    "dayjs": "^1.11.2",
    "next": "12.1.6",
    "next-seo": "^5.4.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-icons": "^4.3.1",
    "react-query": "^3.39.0",
    "zod": "^3.16.0",
    ...
  },

And when install them with pnpm install using [email protected], it throws error:

$ pnpm install
Scope: all 2 workspace projects
apps/web                                 |  WARN  deprecated [email protected]
Packages: +792
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are cloned from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/mymachine/.local/share/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 814, reused 791, downloaded 0, added 792, done
. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 179ms
apps/web postinstall$ pnpx next telemetry disable
│ ../..                                    | Progress: resolved 1, reused 0, downloaded 0, added 0
│ ../..                                    | Progress: resolved 20, reused 9, downloaded 0, added 0
│ ../..                                    |  +10 -783 +--------------------------
│  WARN  Issues with peer dependencies found
│ ../../.local/share/pnpm/store/v3/tmp/dlx-32135
│ └─┬ next
│   ├── ✕ missing peer react@"^17.0.2 || ^18.0.0-0"
│   ├── ✕ missing peer react-dom@"^17.0.2 || ^18.0.0-0"
│   └─┬ styled-jsx
│     └── ✕ missing peer react@">= 16.8.0 || 17.x.x || ^18.0.0-0"
│ Peer dependencies that should be installed:
│   react-dom@"^17.0.2 || ^18.0.0-0"
│   react@">=17.0.2 <18.0.0 || >=18.0.0-0 <19.0.0"
│ ../..                                    | Progress: resolved 20, reused 10, downloaded 0, added 2, do
│ The module 'react' was not found. Next.js requires that you include it in 'dependencies' of your 'pack
│ The module 'react-dom' was not found. Next.js requires that you include it in 'dependencies' of your '
│ node:internal/modules/cjs/loader:942
│   throw err;
│   ^
│ Error: Cannot find module 'react-dom/server.browser'
│ Require stack:
│ - /home/mymachine/myfolder/myproject/node_modules/.pnpm/[email protected]/node_modules/next/dist/bin/next
│     at Module._resolveFilename (node:internal/modules/cjs/loader:939:15)
│     at Module._load (node:internal/modules/cjs/loader:780:27)
│     at Module.require (node:internal/modules/cjs/loader:1005:19)
│     at require (node:internal/modules/cjs/helpers:102:18)
│     at Object.<anonymous> (/home/mymachine/myfolder/myproject/node_modules/.pnpm/[email protected]/node_modules/next/d
│     at Module._compile (node:internal/modules/cjs/loader:1105:14)
│     at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
│     at Module.load (node:internal/modules/cjs/loader:981:32)
│     at Module._load (node:internal/modules/cjs/loader:827:12)
│     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12) {
│   code: 'MODULE_NOT_FOUND',
│   requireStack: [
│     '/home/mymachine/myfolder/myproject/node_modules/.pnpm/[email protected]/node_modules/next/dist/bin/next'
│   ]
│ }
│ Node.js v18.1.0
│  ERROR  Command failed with exit code 1: /home/mymachine/.local/share/pnpm/store/v3/tmp/dlx-32135/node_modul
└─ Failed in 3.3s
 ELIFECYCLE  Command failed with exit code 1.

I tried creating a new next-typescript template project and it installed fine.

$ pnpm install
Lockfile is up-to-date, resolution step is skipped
Packages: +228
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are cloned from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/mymachine/.local/share/pnpm/store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 228, reused 228, downloaded 0, added 228, done

dependencies:
+ next 12.1.6
+ react 18.1.0
+ react-dom 18.1.0

devDependencies:
+ @types/node 17.0.33
+ @types/react 18.0.9
+ @types/react-dom 18.0.4
+ eslint 8.15.0
+ eslint-config-next 12.1.6
+ typescript 4.6.4

What am I doing wrong?

Answer 1

I got this problem while using router in next.js, node.js (lts)

First ensure you have successfully installed router in your node modules use to install routers

npm install next-routes --save

This was my code

import {userouter} from 'next/router'
const router = userouter()
router.push("http://localhost:3000")

And the error was

ReferenceError: userouter is not defined
    at Login (webpack-internal:///./pages/login.js:18:20)
    at renderWithHooks (/home/jonty/naman/school website/client/school/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
- error pages/login.js (8:19) @ userouter
    - error Error [ReferenceError]: userouter is not defined
 const Login = () => {
   7 | 
>  8 |     const router = userouter()

To solve this try useRouter instead of userouter

import {useRouter} from 'next/router'
const router = useRouter()
router.push('http://localhost:3000')