ESLint cannot find next/babel when using pnpm

[ChristianIvicevic]

What version of Turborepo are you using?

1.4.0

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

pnpm

What operating system are you using?

Mac

Describe the Bug

After checking out the repository and opening the with-pnpm example and running pnpm install I noticed that ESLint is having issues in the editor. It claims that there is no module next/babel and this error is displayed both in WebStorm and VSCode. My gut feeling is that next/babel is usually referenced as a transitive peer dependency which doesn't work well with the strict nature of pnpm.

The error appears only when opening the root .eslintrc.js and the index.js in the eslint-config-custom package. Linting generally works and running pnpm lint works as well, it is just really annoying seeing errors when editing either of the files. Opening the basic example or a repository scaffolded with create-turbo and using npm instead of pnpm does not have this particular issue.

Expected Behavior

No ESLint errors in any configuration file.

To Reproduce

Open the with-pnpm example in WebStorm or VSCode with enabled ESLint plugins and install dependencies using pnpm. I could reproduce this with v6.32.25 and v7.7.0 of pnpm both installed with corepack.

[shametim]

you can try configuring your eslint plugin to detect your workspaces under vscode settings.

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

i'm still trying to find out why this happens with pnpm in the first place or why this resolves it.

[ChristianIvicevic]

Even though this proposal can also be applied to WebStorm there is an inherent incompatiblity with pnpm that's not fixed by this. For the time being I applied the pattern I used in the nx-version of my repo with declaring ignorePatterns: ['**/*'] in the eslint-config-custom and then reverting this in the .eslintrc.js within my apps and packages as follows:

module.exports = {
  root: true,
  ignorePatterns: ['!**/*'],
  extends: ['custom'],
};

[weyert]

Maybe this patch from Rush, could also improve things: https://www.npmjs.com/package/@rushstack/eslint-patch

[ChristianIvicevic]

Sadly I won't be able to test the suggested patch since I completely gave up on pnpm again.

Every few months when I try it out there is still issues with packages not adhering to decent standards and thus being incompatible with pnpm. This time around it was prisma... but that is offtopic and another story.

[brizzbuzz]

I get a similar error though I am using yarn :(

[mehulkar]

Try using degit to clone down the directory instead of cloning this whole repo. I've added readme instructions in #1884 and I was able to run npm run lint successfully that way and also don't see any issues in VSCode (which is admittedly not WebStorm, but since we've had multiple issues reported about this, I think it is probably a similar config issue)

[Adam-Collier]

I still look to be having this issue using VS Code 😬

[mehulkar]

This may be the same root cause as #1911 in that next dependency isn't available, rather than an issue related to pnpm 🤔 . Not sure when I'll have time to dig into it, but our examples/ setup needs a bit of love.

[bryanbarrios]

Any update on this issue? When I generate the default project using pnpm create turbo@latest (with Next 13), I keep getting the error "cannot find module next/babel". I tried adding the working directories, but this didn't resolve the error.

[Hamziss]

found out a hacky way to fix this create a settings file .vscode/settings.json or add it to your global settings.json

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

[steida]

@Hamziss Didn't work for me 😞

[barthicus]

@Hamziss Installing next in root package.json solves this but it's hacky solution to me and I don't like it. I used it though.

[tknickman]

@ImBIOS has put up a nice approach to address this here: https://github.com/vercel/turbo/pull/3489

[tknickman]

Merged, going to close for now, but please reopen if this issue comes up again!