ESLint Error During Vercel Deployment #36693

aaronmbos · 2022-05-05T01:05:43Z

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
Binaries:
  Node: 16.13.2
  npm: 8.1.2
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.1.6
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

Not relevant

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I recently set up ESLint in my Next.js app via next lint. Running next lint works correctly in my local development environment. However, when deploying that application an ESLint error is displayed in the build log output. The exact error is:

In my local environment:

When deploying on Vercel:

error - ESLint: Failed to load plugin '@next/next' declared in 
'.eslintrc.json » eslint-config-next/core-web-vitals » /vercel/path0/node_modules/eslint-config-next/index.js': 
Unexpected token '.' Referenced from: /vercel/path0/node_modules/eslint-config-next/index.js

This error does not stop the deployment, but I would like linting to work properly so that I can be sure the build will broken for linting errors.

Here is my current .eslintrc.json

{
  "extends": "next/core-web-vitals"
}

Here is my package.json (I tried the canary version but didn't have any luck so I reverted to 12.1.6)

{
  "name": "personal-site",
  "version": "1.3.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "rss": "node ./scripts/rss.js",
    "lint": "next lint"
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "next": "^12.1.6",
    "next-themes": "^0.0.15",
    "node-fetch": "^2.6.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "remark": "^13.0.0",
    "remark-html": "^13.0.1",
    "rss": "^1.2.2"
  },
  "devDependencies": {
    "@tailwindcss/typography": "^0.5.0",
    "@types/node-fetch": "^2.6.1",
    "@types/react": "^17.0.41",
    "autoprefixer": "^10.4.1",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.6",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.8",
    "typescript": "^4.6.2"
  }
}

Expected Behavior

I would expect linting not to produce this error during deployment so that I can be confident that linting is working properly and that the build will be broken should linting errors exist. While the error does not stop the deployment from happening, it could be misleading for the error to be displayed in the build log output.

To Reproduce

I'm not sure if this particular issue is reproducible in any other repositories, but I can confirm it does happen in all of my attempted production and preview deployments. I do have my app on Vercel integrated with GitHub to do production deploys on pushes to main and preview deploys when pushing to other remote branches.

The steps to reproduce this would be to configure ESLint with specified package versions and deploy via Vercel.

Here is a link to my repo.

The text was updated successfully, but these errors were encountered:

balazsorban44 · 2022-05-05T11:31:34Z

Just curious, does this also happen if you upgrade eslint-config-next as well?

https://github.com/aaronmbos/personal-site/blob/d75a76061701f97d398c8553b93f823133c7d3bc/package.json#L29

aaronmbos · 2022-05-05T12:09:25Z

I tried updating the eslint-config-next package via npm install -D eslint-config-next@canary and npm install -D eslint-config-next@12.1.7-canary.1 but it wasn't able to resolve successfully.

thibautsabot · 2022-05-08T14:38:41Z

Hello!
Do you still encounter the issue with the repo you linked?
I forked it with a very small modification for the API URL and I don't have any eslint errors:

info  - Checking validity of types...
--
16:32:54.251 | info  - Creating an optimized production build...
16:32:59.400 | info  - Compiled successfully
16:32:59.400 | info  - Collecting page data...
16:33:01.479 | info  - Generating static pages (0/5)

aaronmbos · 2022-05-09T11:57:24Z

Thanks for looking into this! I just re-ran a deployment and can confirm that the ESLint is error is still being displayed in the build output.

[06:52:16.436] info  - Checking validity of types...
[06:52:19.912] error - ESLint: Failed to load plugin '@next/next' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /vercel/path0/node_modules/eslint-config-next/index.js': Unexpected token '.' Referenced from: /vercel/path0/node_modules/eslint-config-next/index.js
[06:52:19.915] info  - Creating an optimized production build...
[06:52:24.490] info  - Compiled successfully
[06:52:24.490] info  - Collecting page data...
[06:52:44.888] info  - Generating static pages (0/41)

Here is the entire build output if that is helpful.

[06:52:00.761] Cloning github.com/aaronmbos/personal-site (Branch: feature/database-setup, Commit: 176da7d)
[06:52:01.263] Cloning completed: 501.81ms
[06:52:01.370] Installing build runtime...
[06:52:04.365] Build runtime installed: 2.994s
[06:52:05.671] No Build Cache available
[06:52:05.886] Installing dependencies...
[06:52:05.886] Detected `package-lock.json` generated by npm 7...
[06:52:15.456] 
[06:52:15.456] added 364 packages in 9s
[06:52:15.456] 
[06:52:15.456] 75 packages are looking for funding
[06:52:15.457]   run `npm fund` for details
[06:52:15.475] Detected Next.js version: 12.1.6
[06:52:15.479] Detected `package-lock.json` generated by npm 7...
[06:52:15.479] Running "npm run build"
[06:52:15.752] 
[06:52:15.752] > personal-site@1.3.0 build
[06:52:15.752] > next build
[06:52:15.752] 
[06:52:16.375] warn  - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
[06:52:16.397] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[06:52:16.398] This information is used to shape Next.js' roadmap and prioritize features.
[06:52:16.398] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[06:52:16.398] https://nextjs.org/telemetry
[06:52:16.398] 
[06:52:16.436] info  - Checking validity of types...
[06:52:19.912] error - ESLint: Failed to load plugin '@next/next' declared in '.eslintrc.json » eslint-config-next/core-web-vitals » /vercel/path0/node_modules/eslint-config-next/index.js': Unexpected token '.' Referenced from: /vercel/path0/node_modules/eslint-config-next/index.js
[06:52:19.915] info  - Creating an optimized production build...
[06:52:24.490] info  - Compiled successfully
[06:52:24.490] info  - Collecting page data...
[06:52:44.888] info  - Generating static pages (0/41)
[06:52:45.647] info  - Generating static pages (10/41)
[06:52:46.185] info  - Generating static pages (20/41)
[06:52:46.726] info  - Generating static pages (30/41)
[06:52:47.215] info  - Generating static pages (41/41)
[06:52:47.238] info  - Finalizing page optimization...
[06:52:47.251] 
[06:52:47.260] Page                                         Size     First Load JS
[06:52:47.260] ┌ ● /                                        4.91 kB        81.8 kB
[06:52:47.260] ├   /_app                                    0 B            74.3 kB
[06:52:47.260] ├ ○ /404                                     179 B          74.5 kB
[06:52:47.260] ├ ○ /about                                   10 kB          86.9 kB
[06:52:47.260] ├ ● /posts                                   4.46 kB        81.3 kB
[06:52:47.260] └ ● /posts/[id] (6341 ms)                    4.49 kB        81.4 kB
[06:52:47.260]     ├ /posts/csharp-dotnet-neovim (305 ms)
[06:52:47.261]     ├ /posts/function-overload-typescript
[06:52:47.261]     ├ /posts/using-react-useref-hook
[06:52:47.261]     ├ /posts/typescript-utility-types
[06:52:47.261]     ├ /posts/typescript-literal-types
[06:52:47.261]     ├ /posts/csharp-record-types
[06:52:47.261]     ├ /posts/sql-server-index-fragmentation
[06:52:47.261]     └ [+29 more paths]
[06:52:47.262] + First Load JS shared by all                74.3 kB
[06:52:47.262]   ├ chunks/framework-4fadf02ee0c3c13f.js     42.2 kB
[06:52:47.262]   ├ chunks/main-aa43721e33934d05.js          29.4 kB
[06:52:47.262]   ├ chunks/pages/_app-135088902b936481.js    1.94 kB
[06:52:47.262]   ├ chunks/webpack-34c76af51fb9f015.js       760 B
[06:52:47.262]   └ css/0f8bac13c5612105.css                 4.16 kB
[06:52:47.262] 
[06:52:47.263] ○  (Static)  automatically rendered as static HTML (uses no initial props)
[06:52:47.263] ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
[06:52:47.263] 
[06:52:47.263] Next.js Analytics is enabled for this production build. You'll receive a Real Experience Score computed by all of your visitors.
[06:52:47.263] 
[06:52:47.522] Uploading build outputs...
[06:52:51.168] Build completed. Populating build cache...

dipakparmar · 2022-05-09T16:21:15Z

getting the similar issue on vercel build, no error on local build

terrabythia · 2022-05-11T10:59:30Z

Having the same issue. It's working locally, but in my CI pipeline it gives the error Failed to load plugin '@next/next' declared in '.eslintrc.js » eslint-config-next/core-web-vitals » /builds/project/website/node_modules/eslint-config-next/index.js': Unexpected token '.'

dryleaf · 2022-05-13T09:49:00Z

Is there any workaround this issue?

kennithnichol · 2022-05-15T01:05:47Z

I don't think this is isolated to Vercel deployment. When I run npm run lint which runs next lint I get the same error messages using eslint-config-next@12.1.6. (including the latest canary release)

This error goes away if I downgrade to eslint-config-next@12.1.5.

relevant package.json entries.

{
    // .. relevant prod
    "next": "latest",
    "next-transpile-modules": "^9.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.0",
    // ... relevant dev
    "@types/node": "^16.9.1",
    "@types/react": "^17.0.21",
    "@types/react-dom": "^17.0.9",
    "@types/react-redux": "^7.1.18",
    "eslint": "^8.15.0",
    "eslint-config-next": "^12.1.5",
    "ts-node": "^10.2.1",
    "typescript": "^4.3.4",
}

hanneslund · 2022-05-17T14:04:19Z

@aaronmbos is your deployment running Node 12? If so I think increasing it will work 👍
https://vercel.com/docs/runtimes#official-runtimes/node-js/node-js-version

…ons (#36978) fixes #36693 ## Bug - [x] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md`

aaronmbos · 2022-05-17T17:58:31Z

Thank you! My Vercel build and deployments were targeting Node 12. I bumped to 16.x to match my local dev environment and the error is now longer displayed.

kennithnichol · 2022-05-17T18:13:43Z

#36693 (comment)

confirmed upgrading to node v16 resolves the error locally.

Thanks @hanneslund.

github-actions · 2022-06-17T00:17:06Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

aaronmbos added the bug Issue was opened via the bug report template. label May 5, 2022

balazsorban44 added the Linting Related to `next lint` or ESLint with Next.js. label May 5, 2022

balazsorban44 added the type: needs investigation label May 5, 2022

hanneslund mentioned this issue May 17, 2022

Remove optional chaining from eslint rule to support older node versions #36978

Merged

3 tasks

kodiakhq bot closed this as completed in #36978 May 17, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jun 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ESLint Error During Vercel Deployment #36693

ESLint Error During Vercel Deployment #36693

aaronmbos commented May 5, 2022 •

edited

Loading

balazsorban44 commented May 5, 2022

aaronmbos commented May 5, 2022

thibautsabot commented May 8, 2022

aaronmbos commented May 9, 2022

dipakparmar commented May 9, 2022

terrabythia commented May 11, 2022

dryleaf commented May 13, 2022

kennithnichol commented May 15, 2022 •

edited

Loading

hanneslund commented May 17, 2022

aaronmbos commented May 17, 2022

kennithnichol commented May 17, 2022

github-actions bot commented Jun 17, 2022

ESLint Error During Vercel Deployment #36693

ESLint Error During Vercel Deployment #36693

Comments

aaronmbos commented May 5, 2022 • edited Loading

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

To Reproduce

balazsorban44 commented May 5, 2022

aaronmbos commented May 5, 2022

thibautsabot commented May 8, 2022

aaronmbos commented May 9, 2022

dipakparmar commented May 9, 2022

terrabythia commented May 11, 2022

dryleaf commented May 13, 2022

kennithnichol commented May 15, 2022 • edited Loading

hanneslund commented May 17, 2022

aaronmbos commented May 17, 2022

kennithnichol commented May 17, 2022

github-actions bot commented Jun 17, 2022

aaronmbos commented May 5, 2022 •

edited

Loading

kennithnichol commented May 15, 2022 •

edited

Loading