“npm run dev”突然中断，出现奇怪的错误

Question

I logged onto my Mac today and tried to start up a next.js server on an on-going project and I am getting some strange behaviour with the log. 'npm run dev' fails to complete.

I don't have the previous logs to hand, but I tried completely uninstalling node.js and npm and re-installing, then deleting package-lock.json and node_modules and re-running npm install and it has still not fixed the error.

This is the log it spits out:

1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using npm@6.14.14
3 info using node@v14.17.4
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle client-dashboard@0.1.0~predev: client-dashboard@0.1.0
6 info lifecycle client-dashboard@0.1.0~dev: client-dashboard@0.1.0
7 verbose lifecycle client-dashboard@0.1.0~dev: unsafe-perm in lifecycle true
8 verbose lifecycle client-dashboard@0.1.0~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
9 verbose lifecycle client-dashboard@0.1.0~dev: CWD: /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard
10 silly lifecycle client-dashboard@0.1.0~dev: Args: [ '-c', 'next dev' ]
11 silly lifecycle client-dashboard@0.1.0~dev: Returned: code: 1  signal: null
12 info lifecycle client-dashboard@0.1.0~dev: Failed to exec dev script
13 verbose stack Error: client-dashboard@0.1.0 dev: `next dev`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:400:28)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:400:28)
13 verbose stack     at maybeClose (internal/child_process.js:1055:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid client-dashboard@0.1.0
15 verbose cwd /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard
16 verbose Darwin 20.4.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v14.17.4
19 verbose npm  v6.14.14
20 error code ELIFECYCLE
21 error errno 1
22 error client-dashboard@0.1.0 dev: `next dev`
22 error Exit status 1
23 error Failed at the client-dashboard@0.1.0 dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

What my terminal spits out after running 'npm run dev'

> client-dashboard@0.1.0 dev /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/.env.local
info  - Loaded env from /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 3.9.6
TypeError: Cannot set property 'styles' of undefined
    at module.exports (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/@zeit/next-css/css-loader-config.js:25:56)
    at Object.webpack (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/@zeit/next-sass/index.js:20:37)
    at getBaseWebpackConfig (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/build/webpack-config.js:162:454)
    at async Promise.all (index 0)
    at async HotReloader.start (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/server/hot-reloader.js:16:133)
    at async DevServer.prepare (/Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/server/next-dev-server.js:16:453)
    at async /Users/donnieberry/Documents/WebDevelopment/Work/Client/dashboard/node_modules/next/dist/cli/next-dev.js:22:1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client-dashboard@0.1.0 dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client-dashboard@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

package.json

{
  "name": "client-dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@svgr/webpack": "^5.4.0",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "chartjs-plugin-datalabels": "^0.7.0",
    "file-loader": "^6.0.0",
    "lodash": "^4.17.19",
    "moment": "^2.27.0",
    "next": "^11.0.1",
    "postcss-loader": "^3.0.0",
    "progressbar.js": "^1.1.0",
    "react": "^16.7.0",
    "react-chartjs-2": "^2.9.0",
    "react-datepicker": "^3.1.3",
    "react-dom": "^16.7.0",
    "react-hook-form": "^6.9.6",
    "react-slick": "^0.26.1",
    "react-transition-group": "^4.4.1",
    "sass": "^1.26.9",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^1.4.6",
    "tinycolor": "^0.0.1",
    "tinycolor2": "^1.4.1",
    "typeface-poppins": "^0.0.72",
    "url-loader": "^4.1.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@tailwindcss/custom-forms": "^0.2.1",
    "@types/node": "^14.0.14",
    "@types/react": "^16.9.41",
    "typescript": "^3.9.6"
  }
}

Answer 1

Try this steps.

1. warn - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 3.9.6 - Your crash log from npm. Upgrade to 4.3.2
2. Use Node 12.13.0 , new version of Nodejs (14^) cant work with some older npm packages.
3. Check the correct settings for tailwindcss in your nextjs app. For some reason - TypeError: Cannot set property 'styles' of undefined

Answer 2

Update your Node version.

I had the same issue, I have Node (version 12.13.0) and npm (6.12.0)

When I tried npx create-react-app --use-npm it gave me the same error in your question.

What I did to solve the issue:

1. I tried installing react, react-dom separately, it worked.

2. When I tried to install Next, I had this error message:

   npm WARN notsup Unsupported engine for next@12.0.4: wanted: {"node":">=12.22.0"} (current: {"node":"12.13.0","npm":"6.12.0"})

So, I updated Node, and everything worked just fine.