如何使用 npm 运行 build on the Next.js default project 修复这些错误？

Question

我是一名图形学生，想要学习比经典更进一步的东西 HTML/CSS。

我想构建默认的 Next.js 应用程序，您可以通过 npm create-next-app filename 获得它。

npm run dev当然有效。我可以在 localhost:3000 上看到索引页。但是 npm run build 得到：

% npm run build

> test@0.1.0 build /Users/minori/Documents/portfolio/test
> next build

info  - Checking validity of types  

Failed to compile.

./pages/index.js
8:7  Error: Missing "key" prop for element in array  react/jsx-key
/*almost same messages repeated for every line*/
63:13  Error: Missing "key" prop for element in array  react/jsx-key

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! test@0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the test@0.1.0 build 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:
npm ERR!     /Users/minori/.npm/_logs/2022-02-25T17_53_21_317Z-debug.log

这是调试日志：

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@6.14.15
3 info using node@v14.17.6
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle test@0.1.0~prebuild: test@0.1.0
6 info lifecycle test@0.1.0~build: test@0.1.0
7 verbose lifecycle test@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle test@0.1.0~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/minori/Documents/portfolio/test/node_modules/.bin:/Users/minori/.npm-global/lib/node_modules/n/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/TeX/texbin:/opt/X11/bin:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/minori/bin:/opt/osxws/bin:/opt/osxws/sbin
9 verbose lifecycle test@0.1.0~build: CWD: /Users/minori/Documents/portfolio/test
10 silly lifecycle test@0.1.0~build: Args: [ '-c', 'next build' ]
11 silly lifecycle test@0.1.0~build: Returned: code: 1  signal: null
12 info lifecycle test@0.1.0~build: Failed to exec build script
13 verbose stack Error: test@0.1.0 build: `next build`
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 test@0.1.0
15 verbose cwd /Users/minori/Documents/portfolio/test
16 verbose Darwin 20.3.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v14.17.6
19 verbose npm  v6.14.15
20 error code ELIFECYCLE
21 error errno 1
22 error test@0.1.0 build: `next build`
22 error Exit status 1
23 error Failed at the test@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

我已经尝试 npm install -g npm-rm -rf node_modules-npm install，重新安装 node.js、npm cache clear --force 和 rm package-lock.json。

有人知道问题出在哪里吗？我现在还能尝试什么？

Answer 1

不是你的问题，create-next-app 使用的 eslint-plugin-react 记录了一个问题，如果他们还没有这样做（再次尝试 npm create-next-app），你可以找到 eslint-plugin-react 在你的 package.json 到版本 7.29.1

您可以看到 Vercel 团队注意到了这一变化以及 eslint-plugin-react 作者的回应

https://github.com/yannickcr/eslint-plugin-react/issues/3215#issuecomment-1051115159

如何使用 npm 运行 build on the Next.js default project 修复这些错误？

How can I fix these errors with npm run build on the Next.js default project?

npm

next.js