Error when trying to deploy NextJS app on Vercel - next.js

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.

Answer 1

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)