Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ESLint Error During Vercel Deployment

See original GitHub issue

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.