seo Question posted in
Some basic information to get you started with this can be found here.

Parsing error : Cannot find module 'next/babel' – SEO

Update 1:

Updated the latest working solution to @Jeevan Rupacha answer, please scroll below to check it out.

I have been encountering this error on every single new Next.js project that I create. The page can be compiled without any problem, it just keeps on showing as error on the first line in every js file.

Parsing error: Cannot find module ‘next/babel’
Require stack:

  • D:appnext_appratu-seonode_modulesnextdistcompiledbabelbundle.js
  • D:appnext_appratu-seonode_modulesnextdistcompiledbabeleslint-parser.js
  • D:appnext_appratu-seonode_moduleseslint-config-nextparser.js
  • D:appnext_appratu-seonode_modules@eslinteslintrclibconfig-array-factory.js
  • D:[email protected]
  • D:appnext_appratu-seonode_moduleseslintlibcli-enginecli-engine.js
  • D:appnext_appratu-seonode_moduleseslintlibcli-engineindex.js
  • D:appnext_appratu-seonode_moduleseslintlibapi.js
  • c:UsersAdmin.vscodeextensionsdbaeumer.vscode-eslint-2.1.23serverouteslintServer.js
Tags:

19

Answers


  1. 0

    Create file called .babelrc in your root directory and add this code:

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

    And in .eslintrc, replace the existing code with:

    {
  "extends": ["next/babel","next/core-web-vitals"]
}
    Login or Signup to reply.
  2. 0

    In my case I had to disable VSCode ESLint extension.

    Unfortunately when I added ["next/babel"] in extends, the npm run lint stopped working and Eslint in vscode did not underlining any abnormalities.

    Login or Signup to reply.
  3. 0

    I had this same problem – but only when I wasn’t opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces.

    In addition, the currently accepted answer works for VSCode but breaks npm run lint for me.

    TL;DR – see this answer which points to this blog. This fixed it for me.

    Some Details

    For example, if I have:

    ~
|  -- some_folder
|     | -- project_1
|     | -- project_2
|     ...files relating to both projects...

    I’ll often just cd ~/some_folder && code .

    But then I get the same error you’re experiencing. However, if I cd ~/some_folder/project_1 && code . then everything works fine.

    If that’s the case for you as well, then what you need (as described in the links above) is to:

    • Create a workspace config
    • Specify folders where you need ESLint to run

    You can do this easily from VSCode. The net result (following my example above) is a file named ~/some_folder/.vscode/settings.json with contents

    {
    "eslint.workingDirectories": [
        "./project_1",
        "./project_2"
    ]
}
    Login or Signup to reply.
  4. 0

    It worked for me by just adding prettier in .eslintrc file.

    {
  "extends": ["next", "prettier"]
}
    Login or Signup to reply.
  5. 0

    You can also always try updating React and then Next. I had the same error message then updated them both and now my app is working fine.

    Upgrade React version to latest
    Most applications already use the latest version of React, with Next.js 11 the minimum React version has been updated to 17.0.2.

    To upgrade you can run the following command:

    npm install react@latest react-dom@latest

    Or using yarn:

    yarn add react@latest react-dom@latest

    Upgrade Next.js version to latest
    To upgrade you can run the following command in the terminal:

    npm install next@latest

    or

    yarn add next@latest
    Login or Signup to reply.
  6. 0

    ctrl + shift + p

    TypeScript: Restart TS server

    Login or Signup to reply.
  7. 0

    For Nextjs 12 add prettier in .eslintrc.json file inside your root folder.

    {
  "extends": ["next/core-web-vitals", "prettier"]
}
    Login or Signup to reply.
  8. 0

    Note: You don't need to create extra .babelrc file

    In your NextJS Project you have this file , named .eslintrc.json,
    In this file

    You have following code

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

    Replace it with 

    {
  "extends": ["next/babel","next/core-web-vitals"]
}

    Note: If you only replace with

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

    The red error sign will go but the code won’t compile and gives compile error.

    Login or Signup to reply.
  9. 0

    Really, just adding prettier to "extends": ["next/core-web-vitals] to have something like ==> {"extends": ["next/core-web-vitals", "prettier"]}, gets rid of the error, without having to create an extra .babelrc file. But another research that needs to be done, is to know, if there are any downsides to doing it, and i think the answer is NO

    Login or Signup to reply.
  10. 0

    In my project, i just run yarn add @babel/core and run
    ctrl + shift + p in vscode, excute ESLint: Restart ESlint Server

    ESLint: Restart ESlint Server

    it works, and npm run lint works fine too.

    > Executing task: yarn run lint <

✔ No ESLint warnings or errors
    Login or Signup to reply.
  11. 0

    Using Next.js, TypeScript, and Tailwind CSS, I updated the .eslintrc.json file with:

    {      
  "extends": ["next/babel", "next/core-web-vitals"]
}

    then ctrl + shift + p and search for ESLint: Restart ESLint Server.

    Login or Signup to reply.
  12. 0

    In my case, the problem is that I added "eslint.packageManager": "yarn" to the setting.json of VSCode before, and I tried to use the same setup within a new project managed with pnpm. After adding "eslint.packageManager": "pnpm" for the new workspace, and reload window, than the issue’s gone.

    I’ve tried adding "extends": ["next/babel", "next/core-web-vitals", "prettier"] to .eslintrc.js, it will fix the error only within VSCode, but will cause the other error when building my Next.js app.

    Login or Signup to reply.
  13. 0

    I had this same problem – Close the IDE and reopen it with the project folder !!

    Login or Signup to reply.
  14. 0

    In my case, the issue occurs when I code in VSCode and use pnpm as the package manager, I tried lots of methods in StackOverflow, and finally, I find out that it’s the duty of the VSCode ESLint plugin.

    So, to fix the problem without uninstalling the plugin, add the following configuration in the .vscode/settings.json and reload your editor.

    {
  "eslint.packageManager": "pnpm"
}
    Login or Signup to reply.
  15. 0

    Try updating the .eslintrc.json file to

    {
  "extends": ["next", "prettier","next/core-web-vitals"],
  "plugins": ["prettier"]
}

    Also install prettier plugin if you don’t have it already

    npm install eslint-plugin-prettier@latest --save-dev

    Don’t have to include .babelrc file as it will replace Nextjs SWC compiler
    S

    Login or Signup to reply.
  16. 0

    Just had this issue with the Nextjs app and the following worked for me. I no longer have issue with next/babel and I can run yarn lint.

    Add prettier to your project

    yarn add --dev eslint-config-prettier

    Update your eslint config as follows

    {
  "extends": ["prettier", "next/core-web-vitals"]
}

    Add global vscode settings and include your project path

    {
  "eslint.workingDirectories": ["./your-project"]
}
    Login or Signup to reply.
  17. 0

    My Problem

    I found this error in project with PNPM, ESLint, and Monorepo architecture using Turborepo.

    My Solution

    add this into the ESLint config file:

    parserOptions: {
    babelOptions: {
      presets: [require.resolve('next/babel')],
    },
  },
    Login or Signup to reply.
  18. 0

    If you are using vscode and have multiple folders for your project create .vscode folder in the root of the project and create setting.json file and add following configuration.

     {
  "eslint.workingDirectories": [
   "./client",
   "./server"
   ] 
 }

    Make sure to include the right folder names of your projects

    Login or Signup to reply.
  19. 0

    For me, it’s work with editing this file in NextJS 13 in app version: .eslintrc.json

    {
  "extends": ["next/babel", "next/core-web-vitals"]
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search