I'm now getting tons of ESLint errors on initial app

[srigi]

Creating a new app with yarn 1 now creates app with lots of ESLint errors initially:

• yarn create next-app .
• yarn lint

yarn run v1.22.17
$ next lint

./pages/index.js
8:7  Error: Missing "key" prop for element in array  react/jsx-key
8:7  Error: Missing "key" prop for element in array  react/jsx-key
8:7  Error: Missing "key" prop for element in array  react/jsx-key
9:9  Error: Missing "key" prop for element in array  react/jsx-key
9:9  Error: Missing "key" prop for element in array  react/jsx-key
9:9  Error: Missing "key" prop for element in array  react/jsx-key
10:9  Error: Missing "key" prop for element in array  react/jsx-key
10:9  Error: Missing "key" prop for element in array  react/jsx-key
10:9  Error: Missing "key" prop for element in array  react/jsx-key
11:9  Error: Missing "key" prop for element in array  react/jsx-key
11:9  Error: Missing "key" prop for element in array  react/jsx-key
11:9  Error: Missing "key" prop for element in array  react/jsx-key
14:7  Error: Missing "key" prop for element in array  react/jsx-key
14:7  Error: Missing "key" prop for element in array  react/jsx-key
14:7  Error: Missing "key" prop for element in array  react/jsx-key
15:9  Error: Missing "key" prop for element in array  react/jsx-key
15:9  Error: Missing "key" prop for element in array  react/jsx-key
15:9  Error: Missing "key" prop for element in array  react/jsx-key
16:22  Error: Missing "key" prop for element in array  react/jsx-key
19:9  Error: Missing "key" prop for element in array  react/jsx-key
19:9  Error: Missing "key" prop for element in array  react/jsx-key
19:9  Error: Missing "key" prop for element in array  react/jsx-key
21:11  Error: Missing "key" prop for element in array  react/jsx-key
24:9  Error: Missing "key" prop for element in array  react/jsx-key
24:9  Error: Missing "key" prop for element in array  react/jsx-key
24:9  Error: Missing "key" prop for element in array  react/jsx-key
25:11  Error: Missing "key" prop for element in array  react/jsx-key
25:11  Error: Missing "key" prop for element in array  react/jsx-key
25:11  Error: Missing "key" prop for element in array  react/jsx-key
25:11  Error: Missing "key" prop for element in array  react/jsx-key
26:13  Error: Missing "key" prop for element in array  react/jsx-key
26:13  Error: Missing "key" prop for element in array  react/jsx-key
27:13  Error: Missing "key" prop for element in array  react/jsx-key
27:13  Error: Missing "key" prop for element in array  react/jsx-key
30:11  Error: Missing "key" prop for element in array  react/jsx-key
30:11  Error: Missing "key" prop for element in array  react/jsx-key
30:11  Error: Missing "key" prop for element in array  react/jsx-key
30:11  Error: Missing "key" prop for element in array  react/jsx-key
31:13  Error: Missing "key" prop for element in array  react/jsx-key
31:13  Error: Missing "key" prop for element in array  react/jsx-key
32:13  Error: Missing "key" prop for element in array  react/jsx-key
32:13  Error: Missing "key" prop for element in array  react/jsx-key
35:11  Error: Missing "key" prop for element in array  react/jsx-key
35:11  Error: Missing "key" prop for element in array  react/jsx-key
35:11  Error: Missing "key" prop for element in array  react/jsx-key
35:11  Error: Missing "key" prop for element in array  react/jsx-key
39:13  Error: Missing "key" prop for element in array  react/jsx-key
39:13  Error: Missing "key" prop for element in array  react/jsx-key
40:13  Error: Missing "key" prop for element in array  react/jsx-key
40:13  Error: Missing "key" prop for element in array  react/jsx-key
43:11  Error: Missing "key" prop for element in array  react/jsx-key
43:11  Error: Missing "key" prop for element in array  react/jsx-key
43:11  Error: Missing "key" prop for element in array  react/jsx-key
43:11  Error: Missing "key" prop for element in array  react/jsx-key
47:13  Error: Missing "key" prop for element in array  react/jsx-key
47:13  Error: Missing "key" prop for element in array  react/jsx-key
48:13  Error: Missing "key" prop for element in array  react/jsx-key
48:13  Error: Missing "key" prop for element in array  react/jsx-key
55:7  Error: Missing "key" prop for element in array  react/jsx-key
55:7  Error: Missing "key" prop for element in array  react/jsx-key
55:7  Error: Missing "key" prop for element in array  react/jsx-key
56:9  Error: Missing "key" prop for element in array  react/jsx-key
62:11  Error: Missing "key" prop for element in array  react/jsx-key
63:13  Error: Missing "key" prop for element in array  react/jsx-key

Lint error is on every element in JSX 😳

❯ node -v
v16.13.2
❯ yarn -v
1.22.17

❯ yarn list --depth=0
yarn list v1.22.17
├─ @babel/runtime-corejs3@7.17.2
├─ @babel/runtime@7.17.2
├─ @eslint/eslintrc@1.1.0
├─ @humanwhocodes/config-array@0.9.5
├─ @humanwhocodes/object-schema@1.2.1
├─ @next/env@12.1.0
├─ @next/eslint-plugin-next@12.1.0
├─ @next/swc-android-arm64@12.1.0
├─ @next/swc-darwin-arm64@12.1.0
├─ @next/swc-darwin-x64@12.1.0
├─ @next/swc-linux-arm-gnueabihf@12.1.0
├─ @next/swc-linux-arm64-gnu@12.1.0
├─ @next/swc-linux-arm64-musl@12.1.0
├─ @next/swc-linux-x64-gnu@12.1.0
├─ @next/swc-linux-x64-musl@12.1.0
├─ @next/swc-win32-arm64-msvc@12.1.0
├─ @next/swc-win32-ia32-msvc@12.1.0
├─ @next/swc-win32-x64-msvc@12.1.0
├─ @nodelib/fs.scandir@2.1.5
├─ @nodelib/fs.stat@2.0.5
├─ @nodelib/fs.walk@1.2.8
├─ @rushstack/eslint-patch@1.1.0
├─ @types/json5@0.0.29
├─ @typescript-eslint/parser@5.12.1
├─ @typescript-eslint/scope-manager@5.12.1
├─ @typescript-eslint/types@5.12.1
├─ @typescript-eslint/typescript-estree@5.12.1
├─ @typescript-eslint/visitor-keys@5.12.1
├─ acorn-jsx@5.3.2
├─ acorn@8.7.0
├─ ajv@6.12.6
├─ ansi-regex@5.0.1
├─ ansi-styles@4.3.0
├─ argparse@2.0.1
├─ aria-query@4.2.2
├─ array-includes@3.1.4
├─ array-union@2.1.0
├─ array.prototype.flat@1.2.5
├─ array.prototype.flatmap@1.2.5
├─ ast-types-flow@0.0.7
├─ axe-core@4.4.1
├─ axobject-query@2.2.0
├─ balanced-match@1.0.2
├─ brace-expansion@1.1.11
├─ braces@3.0.2
├─ call-bind@1.0.2
├─ callsites@3.1.0
├─ caniuse-lite@1.0.30001312
├─ chalk@4.1.2
├─ color-convert@2.0.1
├─ color-name@1.1.4
├─ concat-map@0.0.1
├─ core-js-pure@3.21.1
├─ cross-spawn@7.0.3
├─ damerau-levenshtein@1.0.8
├─ debug@4.3.3
├─ deep-is@0.1.4
├─ define-properties@1.1.3
├─ dir-glob@3.0.1
├─ doctrine@2.1.0
├─ emoji-regex@9.2.2
├─ es-abstract@1.19.1
├─ es-to-primitive@1.2.1
├─ escape-string-regexp@4.0.0
├─ eslint-config-next@12.1.0
├─ eslint-import-resolver-node@0.3.6
├─ eslint-import-resolver-typescript@2.5.0
├─ eslint-module-utils@2.7.3
├─ eslint-plugin-import@2.25.4
├─ eslint-plugin-jsx-a11y@6.5.1
├─ eslint-plugin-react-hooks@4.3.0
├─ eslint-plugin-react@7.29.0
├─ eslint-scope@7.1.1
├─ eslint-utils@3.0.0
├─ eslint-visitor-keys@3.3.0
├─ eslint@8.9.0
├─ espree@9.3.1
├─ esquery@1.4.0
├─ esrecurse@4.3.0
├─ estraverse@5.3.0
├─ esutils@2.0.3
├─ fast-deep-equal@3.1.3
├─ fast-glob@3.2.11
├─ fast-json-stable-stringify@2.1.0
├─ fast-levenshtein@2.0.6
├─ fastq@1.13.0
├─ file-entry-cache@6.0.1
├─ fill-range@7.0.1
├─ find-up@2.1.0
├─ flat-cache@3.0.4
├─ flatted@3.2.5
├─ fs.realpath@1.0.0
├─ function-bind@1.1.1
├─ functional-red-black-tree@1.0.1
├─ get-intrinsic@1.1.1
├─ get-symbol-description@1.0.0
├─ glob-parent@6.0.2
├─ glob@7.2.0
├─ globals@13.12.1
├─ globby@11.1.0
├─ has-bigints@1.0.1
├─ has-flag@4.0.0
├─ has-symbols@1.0.2
├─ has-tostringtag@1.0.0
├─ has@1.0.3
├─ ignore@5.2.0
├─ import-fresh@3.3.0
├─ imurmurhash@0.1.4
├─ inflight@1.0.6
├─ inherits@2.0.4
├─ internal-slot@1.0.3
├─ is-bigint@1.0.4
├─ is-boolean-object@1.1.2
├─ is-callable@1.2.4
├─ is-core-module@2.8.1
├─ is-date-object@1.0.5
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
├─ is-negative-zero@2.0.2
├─ is-number-object@1.0.6
├─ is-number@7.0.0
├─ is-regex@1.1.4
├─ is-shared-array-buffer@1.0.1
├─ is-string@1.0.7
├─ is-symbol@1.0.4
├─ is-weakref@1.0.2
├─ isexe@2.0.0
├─ js-tokens@4.0.0
├─ js-yaml@4.1.0
├─ json-schema-traverse@0.4.1
├─ json-stable-stringify-without-jsonify@1.0.1
├─ json5@1.0.1
├─ jsx-ast-utils@3.2.1
├─ language-subtag-registry@0.3.21
├─ language-tags@1.0.5
├─ levn@0.4.1
├─ locate-path@2.0.0
├─ lodash.merge@4.6.2
├─ loose-envify@1.4.0
├─ lru-cache@6.0.0
├─ merge2@1.4.1
├─ micromatch@4.0.4
├─ minimatch@3.1.2
├─ minimist@1.2.5
├─ ms@2.1.2
├─ nanoid@3.3.1
├─ natural-compare@1.4.0
├─ next@12.1.0
├─ object-assign@4.1.1
├─ object-inspect@1.12.0
├─ object-keys@1.1.1
├─ object.assign@4.1.2
├─ object.entries@1.1.5
├─ object.fromentries@2.0.5
├─ object.hasown@1.1.0
├─ object.values@1.1.5
├─ once@1.4.0
├─ optionator@0.9.1
├─ p-limit@1.3.0
├─ p-locate@2.0.0
├─ p-try@1.0.0
├─ parent-module@1.0.1
├─ path-exists@3.0.0
├─ path-is-absolute@1.0.1
├─ path-key@3.1.1
├─ path-parse@1.0.7
├─ path-type@4.0.0
├─ picocolors@1.0.0
├─ picomatch@2.3.1
├─ postcss@8.4.5
├─ prelude-ls@1.2.1
├─ prop-types@15.8.1
├─ punycode@2.1.1
├─ queue-microtask@1.2.3
├─ react-dom@17.0.2
├─ react-is@16.13.1
├─ react@17.0.2
├─ regenerator-runtime@0.13.9
├─ regexp.prototype.flags@1.4.1
├─ regexpp@3.2.0
├─ resolve-from@4.0.0
├─ resolve@1.22.0
├─ reusify@1.0.4
├─ rimraf@3.0.2
├─ run-parallel@1.2.0
├─ scheduler@0.20.2
├─ semver@6.3.0
├─ shebang-command@2.0.0
├─ shebang-regex@3.0.0
├─ side-channel@1.0.4
├─ slash@3.0.0
├─ source-map-js@1.0.2
├─ string.prototype.matchall@4.0.6
├─ string.prototype.trimend@1.0.4
├─ string.prototype.trimstart@1.0.4
├─ strip-ansi@6.0.1
├─ strip-bom@3.0.0
├─ strip-json-comments@3.1.1
├─ styled-jsx@5.0.0
├─ supports-color@7.2.0
├─ supports-preserve-symlinks-flag@1.0.0
├─ text-table@0.2.0
├─ to-regex-range@5.0.1
├─ tsconfig-paths@3.12.0
├─ tslib@1.14.1
├─ tsutils@3.21.0
├─ type-check@0.4.0
├─ type-fest@0.20.2
├─ unbox-primitive@1.0.1
├─ uri-js@4.4.1
├─ use-subscription@1.5.1
├─ v8-compile-cache@2.3.0
├─ which-boxed-primitive@1.0.2
├─ which@2.0.2
├─ word-wrap@1.2.3
├─ wrappy@1.0.2
└─ yallist@4.0.0

Any ideas how to solve?

[thibautsabot]

Hello.

I was able to reproduce the issue with the default create-next-app.

It seems that it is a problem with eslint-plugin-react in its latest version (published 2 hours ago). See: jsx-eslint/eslint-plugin-react#3215

(fixed in #34800 (release on https://github.com/vercel/next.js/releases/tag/v12.1.1-canary.3))

[devin-aegis-studio]

yeah not working for me either

[davidobodo]

Currently having the exact same issue

[GuillaumeBettin]

Still have the same problem after updating to v12.1.1-canary.3

[LevanSanadiradze]

Still have the same problem after updating to v12.1.1-canary.3

Update eslint-config-next to 12.1.1-canary.3 too, if you have it installed.
Or look for any other package that you have installed and depends on eslint-plugin-react and update it.

[GuillaumeBettin]

It worked, thank you !

[nakulthebuilder]

Updating next didnt work for me, needed to use a resolution:

"resolutions": {
    "eslint-plugin-react": "7.28.0"
  }

[akazwz]

It works, Thank you!

[LevanSanadiradze]

Thanks all for the help - issue still persists for us despite using force-resolution. If there are any other thoughts on how to go about this, please let me know. Thank you!

You can ignore eslint during build

[hurvajs77]

yeah, I've the same problem. The force resolution doesn't help too ;-(

[scglenn]

I have the same issue, none of the solutions in this thread seem to work

[GuillaumeBettin]

I have the same issue, none of the solutions in this thread seem to work

Did you try to upgrade both "next" and "eslint-config-next" to 12.1.1-canary.3 ?

[LevanSanadiradze]

Three solutions for anyone having the same issue:

1. Try updating next and eslint-config-next to 12.1.1-canary.3.

2. If the previous one doesn't help you, try adding the following to your package.json (You need yarn for this to work):

"resolutions": {
    "eslint-plugin-react": "7.28.0"
}

3. If the above two doesn't work for you you can ignore the eslint errors during builds

[hatsumatsu]

Still having this issue with both next and eslint-config-next updated to 12.1.1-canary.5.
Could having a custom babel config that lets next opt out of using swc still cause this?

[orionmiz]

Have you tried to remove .next folder(containing eslint caches) and re-build?

[hatsumatsu]

Have you tried to remove .next folder(containing eslint caches) and re-build?

This fixed the problem, thanks!