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

I'm a graphic student trying to learn something further than classic HTML/CSS.

I want to build the default Next.js app, which you can get by npm create-next-app filename.

It certainly works when npm run dev. I can see the index page on localhost:3000. But npm run build gets:

% npm run build

> [email protected] 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! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

And here is the 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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~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 [email protected]~build: CWD: /Users/minori/Documents/portfolio/test
10 silly lifecycle [email protected]~build: Args: [ '-c', 'next build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1  signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] 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 [email protected]
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 [email protected] build: `next build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

I already tried npm install -g npm-rm -rf node_modules-npm install, re-installing node.js, npm cache clear --force and rm package-lock.json.

Does anyone know what the problem is? What else can I try now?

CodePudding user response：

It's not you, there is an issue logged with eslint-plugin-react that create-next-app uses, if they haven't already done so (try npm create-next-app again) you can find eslint-plugin-react in your package.json to version 7.29.1

You can see the Vercel team noting the change and the eslint-plugin-react author's responding

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