When I attempted to set up a new application using npm create next-app --typescript, everything seemed to be going smoothly. However, upon trying to start the project with npm start, an error message popped up stating "Error: Cannot find module 'stream/web'." Here's the process I went through:
(base) ➜ Next-Project npm create next-app --typescript
Need to install the following packages:
create-next-app
Ok to proceed? (y) y
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/tempuser/Documents/React/Next-Project/my-app.
Using npm.
Initializing project with template: app
Installing dependencies:
- react
- react-dom
- next
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="204e4558546011130e140e1119">[email protected]</a>',
npm WARN EBADENGINE required: { node: '>=16.8.0' },
npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.24.2' }
npm WARN EBADENGINE }
added 23 packages, and audited 24 packages in 3s
4 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Initialized a git repository.
Success! Created my-app at /Users/tempuser/Documents/React/Next-Project/my-app
(base) ➜ Next-Project ls
my-app
(base) ➜ Next-Project cd my-app
(base) ➜ my-app git:(main) npm start
> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="08657125697878483826392638">[email protected]</a> start
> next start
node:internal/modules/cjs/loader:927
throw err;
^
Error: Cannot find module 'stream/web'
Require stack:
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/node-polyfill-web-streams.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/render.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/lib/server-ipc/index.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/lib/router-server.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/lib/start-server.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/cli/next-start.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/lib/commands.js
- /Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/bin/next
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:924:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:996:19)
at require (node:internal/modules/cjs/helpers:92:18)
at Object.<anonymous> (/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/node-polyfill-web-streams.js:6:9)
at Module._compile (node:internal/modules/cjs/loader:1092:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
at Module.load (node:internal/modules/cjs/loader:972:32)
at Function.Module._load (node:internal/modules/cjs/loader:813:14)
at Module.require (node:internal/modules/cjs/loader:996:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/node-polyfill-web-streams.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/render.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/lib/server-ipc/index.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/lib/router-server.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/server/lib/start-server.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/cli/next-start.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/lib/commands.js',
'/Users/tempuser/Documents/React/Next-Project/my-app/node_modules/next/dist/bin/next'
]
}
Upon reviewing the installation information for next-app, it indicated that my current node version was 'v15.14.0' as shown by this line:
npm WARN EBADENGINE current: { node: 'v15.14.0', npm: '7.24.2' nvm ls and node --version, both displayed v18.17.1:
(base) ➜ Next-Project nvm ls
v18.2.0
-> v18.17.1
system
default -> node (-> v18.17.1)
node -> stable (-> v18.17.1) (default)
stable -> 18.17 (-> v18.17.1) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/hydrogen (-> v18.17.1)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2 (-> N/A)
lts/hydrogen -> v18.17.1
(base) ➜ Next-Project node --version
npm --version
v18.17.1
10.0.0
Any idea what might have caused this issue? Your insights would be greatly appreciated.
In an attempt to rectify the problem, I experimented with upgrading and downgrading both the node and npm versions in order to ensure compatibility. After each adjustment, I made a point to remove and reinstall the node_modules and package-lock.json files before relaunching the application. It seems to me that the underlying issue may stem from a version mismatch.