'npm run dev' 突然坏了，出现奇怪的错误

Question

我今天登录我的 Mac 并尝试在一个正在进行的项目中启动 next.js 服务器，但我的日志出现了一些奇怪的行为。 'npm run dev' 无法完成。

我手头没有以前的日志，但是我尝试完全卸载 node.js 和 npm 并重新安装，然后删除 package-lock.json 和 node_modules 并重新运行 npm install 仍然没有修复错误。

这是它吐出的日志：

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 ]

运行“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

试试这个步骤。

1. 警告 - 推荐的最低 TypeScript 版本是 v4.3.2，旧版本可能与 Next.js 不兼容。检测到：3.9.6 - 您来自 npm 的崩溃日志。升级到 4.3.2
2. 使用 Node 12.13.0 ，新版本的 Nodejs (14^) 无法与一些较旧的 npm 包一起使用。
3. 在 nextjs 应用程序中检查 tailwindcss 的正确设置。出于某种原因 - TypeError: Cannot set property 'styles' of undefined

Answer 2

更新您的节点版本。

我有同样的问题，我有 Node（版本 12.13.0）和 npm (6.12.0)

当我尝试npx create-react-app --use-npm 时，它在您的问题中给了我同样的错误。

我做了什么来解决这个问题：

1. 我试过分别安装react、react-dom，效果不错。

2. 当我尝试安装 Next 时，出现以下错误消息：

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

所以，我更新了 Node，一切正常。