Error when trying to deploy NextJS app on Vercel

Question

I've been trying to deploy my NextJS onto Vercel, but keep getting the following error:

19:07:34.256
> Build error occurred
19:07:34.257
Error: Failed to load config "next/babel" to extend from.
19:07:34.258
Referenced from: /vercel/path0/.eslintrc
19:07:34.258
  type: 'Error',
19:07:34.258
  messageTemplate: 'extend-config-missing',
19:07:34.258
  messageData: { configName: 'next/babel', importerName: '/vercel/path0/.eslintrc' }
19:07:34.258
}
19:07:34.277
Error: Command "npm run build" exited with 1

Below is my .babelrc file:

{
  "presets": ["next/babel"],
  "plugins": []
}

My .eslintrc file:

{
  "extends": ["next/babel"]
}

And my package-json file:

{
  "name": "google-docs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@material-tailwind/react": "0.3.4",
    "@next-auth/firebase-adapter": "^0.1.2",
    "draft-js": "^0.11.7",
    "firebase": "^8.9.1",
    "next": "11.0.1",
    "next-auth": "^3.27.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-firebase-hooks": "^3.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.7"
  }
}

Also, building the project locally is also not working because of the same error. How do I solve this issue? Thank you in advance.

Try removing `"next/babel"` from the ESLint `extends` array. — juliomalves, Aug 15 '21 at 13:59
Initially, it didn't work due to 'keyword import is reserved' error. And I found the solution from this thread: https://stackoverflow.com/questions/36002226/parsing-error-the-keyword-import-is-reserved-sublimelinter-contrib-eslint#41190209 — iamkyo, Aug 15 '21 at 17:12

score 2 · Answer 1 · answered Aug 15 '21 at 17:18

For those who are wondering, the solution that I used is first to remove the "next/babel" from the extends array, as julio has suggested.

Then, I install babel-eslint:

npm i babel-eslint --save-dev

I then changed the entire .eslintrc file to this:

{
 "parser": "babel-eslint"
}

And the build was successful! Credit goes julio and the answers from this thread: Parsing Error The Keyword import is Reserved (SublimeLinter-contrib-eslint)

Error when trying to deploy NextJS app on Vercel

1 Answers1