Typescript example build error with ESLint: Failed to load plugin '@next/next' declared in '.eslintrc.json

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

yarn run v1.22.19 $ /home/jshnai/linkshare/frontend/node_modules/.bin/next info

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
  Node: 12.22.5
  npm: 7.5.2
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 12.1.7-canary.29
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

yarn create next-app --typescript my_app cd my_app yarn add next@canary yarn next build

yarn run v1.22.19
$ /home/jshnai/my_app/node_modules/.bin/next build
info  - Linting and checking validity of types ...error - ESLint: Failed to load plugin '@next/next' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /home/jshnai/my_app/node_modules/eslint-config-next/index.js': Unexpected token '.' Referenced from: /home/jshnai/my_app/node_modules/eslint-config-next/index.js
info  - Linting and checking validity of types
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                       Size     First Load JS
┌ ○ /                                      6.27 kB        82.3 kB
├   └ css/149b18973e5508c7.css             655 B
├   /_app                                  0 B              76 kB
├ ○ /404                                   193 B          76.2 kB
└ λ /api/hello                             0 B              76 kB
+ First Load JS shared by all              76 kB
  ├ chunks/framework-1f10003e17636e37.js   45 kB
  ├ chunks/main-1bc3d73035f0a0d1.js        29.7 kB
  ├ chunks/pages/_app-43ac001d99fedbd3.js  493 B
  ├ chunks/webpack-69bfa6990bb9e155.js     769 B
  └ css/27d177a30947857b.css               194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

Done in 7.41s.

Expected Behavior

There should be no error loading the ESLint ‘@next/next’ plugin

To Reproduce

yarn create next-app --typescript my_app cd my_app yarn add next@canary yarn next build

[MikeCarbone]

Running into this issue again. Weirdly, linting works locally but running the next lint command during Github actions fails. I’m running Next version 12.1.6, running into the same issue using eslint-config-next at the latest canary version, as well as the 12.1.6 version. I’m investigating, I’ll update if I find a solution.

Error:

Failed to load plugin '@next/next' declared in '.eslintrc.js » eslint-config-next/core-web-vitals » /home/runner/work/homework-admin/homework-admin/node_modules/eslint-config-next/index.js': Unexpected token '.'

Edit: Solved! My Github actions config was using an older version of Node (12.x), I bumped it to 16.x to match my local development configuration. Now the linting succeeds. Found my solution here: https://github.com/vercel/next.js/issues/36693#issuecomment-1128913502

[MikeCarbone]

Was running into the same issue, npm install eslint-config-next@12.1.7-canary.35 fixed it!