Parsing error: Cannot find module 'next/babel' in Visual Studio Code

What version of Turborepo are you using?

1.4.7

What package manager are you using / does the bug impact?

pnpm

What operating system are you using?

Mac

Describe the Bug

Hi! I just created a turborepo project using npx, and VSCode throws the following error:

Parsing error: Cannot find module 'next/babel'
Require stack:
- /Users/celia/.dev/flex/node_modules/.pnpm/next@12.3.0_ir3quccc6i62x6qn6jjhyjjiey/node_modules/next/dist/compiled/babel/bundle.js
- /Users/celia/.dev/flex/node_modules/.pnpm/next@12.3.0_ir3quccc6i62x6qn6jjhyjjiey/node_modules/next/dist/compiled/babel/eslint-parser.js
- /Users/celia/.dev/flex/node_modules/.pnpm/eslint-config-next@12.3.0_dyxdave6dwjbccc5dgiifcmuza/node_modules/eslint-config-next/parser.js
- /Users/celia/.dev/flex/node_modules/.pnpm/@eslint+eslintrc@0.4.3/node_modules/@eslint/eslintrc/lib/config-array-factory.js
- /Users/celia/.dev/flex/node_modules/.pnpm/@eslint+eslintrc@0.4.3/node_modules/@eslint/eslintrc/lib/index.js
- /Users/celia/.dev/flex/node_modules/.pnpm/eslint@7.32.0/node_modules/eslint/lib/cli-engine/cli-engine.js
- /Users/celia/.dev/flex/node_modules/.pnpm/eslint@7.32.0/node_modules/eslint/lib/cli-engine/index.js
- /Users/celia/.dev/flex/node_modules/.pnpm/eslint@7.32.0/node_modules/eslint/lib/api.js
- /Users/celia/.vscode-insiders/extensions/dbaeumer.vscode-eslint-2.2.6/server/out/eslintServer.jseslint

This is from a project out-of-the-box, created with npx create-turbo. I haven’t made any changes to the bootstrapped files.

I have tried a few solutions:

1. This workaround suggested by Saral Karki: basically adding "next/babel" in the list of extends, inside of eslint-config-custom. It does “fix” the error inside VSCode, making it stop yelling at me.
2. However, with this change, pnpm run lint breaks throwing the following error: Failed to load config "next/babel" to extend from.. I then found this thread, where Domi said the first fix I tried is basically a “hack”. I then tried tinkering around with Akasha’s answer, with no success.
3. Setting up eslint.workingDirectories to my packages/ and apps/ folders in my .vscode/settings.json (making sure I had no conflict in my personal settings.json, no success here either.
4. Setting up eslint.packageManager to pnpm, nothing here.
5. Installing @babel/eslint-parser, nothing either.

Note: the issue does not appear when using npm or yarn as the default package manager, configured in the create-turbo CLI.

Expected Behavior

VSCode doesn’t throw an error about a parsing error, and the build runs correctly.

To Reproduce

1. Run pnpx create-turbo or npx create-turbo
2. Setup using CLI as normal, and select pnpm as the package manager.
3. Open Visual Studio Code with the ESLint extension code installed.
4. Open any .eslintrc.js or any next.config.js file in the default project.
5. The error will be visible at the top of the IDE window.

[zmrl010]

I was able to get this working also by installing next in the root of my pnpm workspace. I was curious to see if there was a better way and I managed to come up with a workaround I haven’t seen yet, maybe it would be useful to someone else.

I’m not sure where the above mentioned line comes into play, but I found the problematic part of the config for me was this line:

https://github.com/vercel/next.js/blob/cae96f27ec53cd42e992a748b9727852df9247c5/packages/eslint-config-next/index.js#L85

Which makes total sense because I only experience this issue in certain js config files, not in typescript because that uses the typescript parser rather than the babel one.

In order to workaround this, I installed next in the eslint config package within my workspace and I used require.resolve to supply the babel parser with an absolute path to next/babel within my sharable config. It looks like this:

/**
 * @type {import('eslint').Linter.Config}
 */
module.exports = {
  extends: ['next/core-web-vitals', 'turbo', 'prettier'],
  ignorePatterns: ['node_modules', 'dist'],
  parserOptions: {
    babelOptions: {
      presets: [require.resolve('next/babel')],
    },
  },
};

So far, I haven’t found any unintended side-effects. I still have some testing to do in order to be certain.

[zmrl010]

I think I understand. The discussions here have all been focused around monorepo or multi-package repo setup. Are you currently using a package manager to leverage this functionality? All the major players have support now, but I use pnpm. When I refer to root, I am saying at the very base directory of my project, there is a file called pnpm-workspace.yaml and this tells me where I have subpackages or projects installed. In yarn or npm this will be workspaces property in package.json. If you are not using these features, you might check it out to see if it would be good for your way of doing things.

The reason why it works correctly when you open a project in VSCode directly is because often times extensions use default install locations and since you have an unusual layout, VSCode just gets confused. The ESLint setting “eslint.workingDirectories” is an important setting for this type of scenario. One of my next projects is setup like this:

// .vscode/settings.json

{
  "eslint.workingDirectories": [
    { "pattern": "apps/*/" },
    { "pattern": "packages/*/" }
  ]
}

This allows each project in apps/ or packages/ to supply their own linting config and the extension should read from the config of the project you’re in. Hopefully that helps!