Cannot find module 'next/babel' with Yarn 2 and Next.js 10.0.2

[fmal]

Bug report

Describe the bug

When using Yarn 2.3.3 with Next.js 10.0.2 and custom .babelrc file that extends default preset next/babel (according to https://nextjs.org/docs/advanced-features/customizing-babel-config), yarn run dev results in Cannot find module 'next/babel' error.
Prior to 10.0.2 this used to work without error.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. yarn create next-app my-app
2. cd my-app
3. yarn set version berry && yarn set version latest && yarn install
4. create .babelrc file with the following contents:

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

5. yarn run dev
6. see error

Expected behavior

no errors and the dev environment starts fine.
the following work as expected:

• Next.js 10.0.1 and Yarn 2.3.3

Screenshots

System information

• OS: macOS
• Version of Next.js: 10.0.2
• Version of Node.js: 14.13.0

Additional context

N/A

[meotimdihia]

same here on Ubuntu 20 for Windows. Nodejs 12.

[c0]

One workaround is to turn off yarn 2's PNP:

yarnrc.yml

nodeLinker: "node-modules"

Credit to @SagnikPradhan in his PR above.

[jensmeindertsma]

Is there anything I can do to help this get fixed as soon as possible?

[andrewmclagan]

@jensmeindertsma write a PR.

seeing this on 10.0.4-canary.7. One solution is to simply not have the babel config file (remove it) if you have the default.

[jensmeindertsma]

One solution is to simply not have the babel config file (remove it) if you have the default.

This is true, but I need one for ESLint with @babel/parser

[paperdave]

idk why no one has mentioned it but you can change "next/babel" with require.resolve("next/babel") and it works on yarn 2 with pnp on the latest release of next as of writing which seems to be 10.0.3.

you'll need a babel.config.js not a .babelc though. heres an example

module.exports = {
  presets: [
    require.resolve('next/babel')
  ]
};

then yarn dev and it should be working. i tested this using a custom server but it shouldn't matter

however this should still be fixed in the actual codebase. i wonder what is causing it since resolve and require.resolve should resolve the package just fine (the package should work now according to yarn docs, and we're literally using require.resolve).

[fmal]

@davecaruso great hint, also if you're working in a monorepo context, you could have babel.config.js with babelrcRoots specified in repo root and use .babelrc.js with require.resolve("next/babel") as you suggested instead of .babelrc inside of a package

[merceyz]

Fixed in #20586 (v10.0.5-canary.4)

[fmal]

@merceyz thank you!

[arifali123]

idk why no one has mentioned it but you can change "next/babel" with require.resolve("next/babel") and it works on yarn 2 with pnp on the latest release of next as of writing which seems to be 10.0.3.

you'll need a babel.config.js not a .babelc though. heres an example

module.exports = {
  presets: [
    require.resolve('next/babel')
  ]
};

then yarn dev and it should be working. i tested this using a custom server but it shouldn't matter

however this should still be fixed in the actual codebase. i wonder what is causing it since resolve and require.resolve should resolve the package just fine (the package should work now according to yarn docs, and we're literally using require.resolve).

This worked perfectly thank you very much

[jplew]

I was getting this error because I was trying to edit _app.js in a Typescript project. I renamed it to _app.tsx and the editor warning disappeared. 🤦‍♂️

[igdev116]

Because you weren't opening the project folder directly. It appears to be related to how ESLint needs to be configured for workspaces. Just create a folder name .vscode/settings.json on your working directory and add those code:

{
  "eslint.workingDirectories": [
      "./folder_name_1",
      "./folder_name_2",
  ]
}

And the warning will disappear! Hope it works for you 😄

Source: https://stackoverflow.com/questions/68163385/parsing-error-cannot-find-module-next-babel

[GGAlanSmithee]

@igdev116 thank you very much for this! 👍

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.