ESLint: Failed to load parser in examples/design-system

[theurgi]

What version of Turborepo are you using?

latest

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

Yarn v1

What operating system are you using?

Mac

Describe the Bug

After cloning examples/design-system and installing dependencies, VSCode's ESLint extension produces the following error:

ESLint: Failed to load parser './parser.js' declared in 
'.eslintrc.js » eslint-config-acme » eslint-config-next': 
Cannot find module 'next/dist/compiled/babel/eslint-parser'

It seems that eslint-config-next depends on next:

// node_modules/eslint-config-next/parser.js

const {
  parse,
  parseForESLint,
} = require('next/dist/compiled/babel/eslint-parser') // ❌ Cannot find module

Despite what examples/with-nextjs says, examples/design-system doesn't contain next.

Expected Behavior

No ESLint errors, all dependencies to resolve.

To Reproduce

npx degit vercel/turborepo/examples/design-system design-system
cd design-system
yarn install
git init . && git add . && git commit -m "Init"

[mehulkar]

VSCode's ESLint extension produces the following error:

Could you show how to reproduce this part? I ran the setup steps and opened the project in VSCode and opened a few files and didn't see any issues (in acme-core/src/, etc)

Despite what examples/with-nextjs says, examples/design-system doesn't contain next.

IMO, with-nextjs is out of date and should be deleted, and we should rename basic to with-nextjs. Some of the remaining examples contain Next.js, but not all, so it's a bit out of date. A PR to that effect would probably be a good start @theurgi! cc @vercel/turbo-oss

[theurgi]

vscode: VSCodium v1.71.0
extension: dbaeumer.vscode-eslint v2.2.6

Could you show how to reproduce this part? I ran the setup steps and opened the project in VSCode and opened a few files and didn't see any issues (in acme-core/src/, etc)

After degit and install, I just open one of .eslintrc.js or packages/eslint-config-acme/index.js

And then opening node_modules/eslint-config-next/parser.js

This makes sense because node_modules/next doesn't exist. I assume this is related to: vercel/next.js#38939 (comment)

It seems that there are a few options:

1. Refactor eslint-config-acme removing the eslint-config-next dependency and adding the relevant configs that comprise it (i.e. eslint-plugin-react, eslint-plugin-react-hooks, etc.)

2. Add next as a dependency somewhere in monorepo—this is why other examples/with-nextjs that actually contain next and have an identical package/eslint-config-acme don't encounter this issue.

Option 1 seems most logical. Adding next just to satisfy an eslint config seems backwards. And if I'm not mistaken, even in the examples that do contain next, the only reason they don't encounter this issue is because next is being hoisted to the root node_modules and can therefore be resolved in different in-monorepo packages—this also seems a bit backwards.

Hope that makes sense 🙏

[nathanhammond]

We need to fix our config for examples/design-system here. It contains the wrong dependencies.

While in here we should also move away from acme, which we only use in design-system and with-changesets.

[nathanhammond]

@theurgi Thank you for the extremely detailed reproduction!