Setting up Turborepo with pnpm and shared TypeScript and ESLint configs

[wujekbogdan]

Goals:

• Shared ESlint config
• Shared TypeScript config
• No TypeScript or ESLint configs in the repository root
• pnpm as package manager

Current setup:

Here's the repo that contains a simplified version of the setup I have: https://github.com/wujekbogdan/turbo-eslint-typescript

• TypeScript config: packages/tsconfig
• ESlint config: packages/eslint-cinfig
• An example app: app/my-app

Issues

This setup used to work fine before, when I used yarn. I migrated to pnpm lately and since then I'm struggling with ESLint setup. I suppose it has something to do with how pnpm links packages.

In ESlint config I have the following section:

// packages/eslint-config/index.js
{
  // ...
  parserOptions: {
    tsconfigRootDir: __dirname,
    project:[
      './tsconfig.eslint.json',
      './tsconfig.json',
    ],
  },
}

Which, to my understanding, means that tsconfig.json file should be resolved based on the tsconfigRootDir which points to a directory where the ESLint config is.

This is how apps/my-app imports this config:

// apps/my-app/.eslitrc.js
module.exports = {
  root: true,
  extends: ['@my-namespace/eslint-config'],
};

So, If I get it right, __dirname point to apps/my-app so ESlint should be able to pick the apps/my-app/tsconfig.json file.

It doesn't work though. I'm getting the following error:

→ turbo lint --force
• Packages in scope: @my-namespace/eslint-config, @my-namespace/my-app, @my-namespace/tsconfig
• Running lint in 3 packages
• Remote caching disabled
@my-namespace/my-app:lint: cache bypass, force executing 7acddb528cdeff99
@my-namespace/my-app:lint:
@my-namespace/my-app:lint: > @my-namespace/[email protected] lint /Users/wujekbogdan/turbo-eslint-typescript/apps/my-app
@my-namespace/my-app:lint: > eslint --ext .ts src
@my-namespace/my-app:lint:
@my-namespace/my-app:lint:
@my-namespace/my-app:lint: /Users/wujekbogdan/turbo-eslint-typescript/apps/my-app/src/index.ts
@my-namespace/my-app:lint:   0:0  error  Parsing error: File '@my-namespace/tsconfig/base.json' not found
@my-namespace/my-app:lint:
@my-namespace/my-app:lint: ✖ 1 problem (1 error, 0 warnings)
@my-namespace/my-app:lint:
@my-namespace/my-app:lint:  ELIFECYCLE  Command failed with exit code 1.
@my-namespace/my-app:lint: ERROR: command finished with error: command (/Users/wujekbogdan/turbo-eslint-typescript/apps/my-app) pnpm run lint exited (1)
command (/Users/wujekbogdan/turbo-eslint-typescript/apps/my-app) pnpm run lint exited (1)

PS
There's nothing wrong with tsc. TS compilation works fine.

Workaround

A workaround is to remove the parserOptions section from the shared config entirely and add add the parserOptions section to each package in the monorepo:

module.exports = {
  root: true,
  extends: ['@flo/eslint-config-custom'],
  // Each package in monorepo needs this section:
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: 'tsconfig.json',
  },
};

It works, but I'm not a big fan of this solution, especially considering that it used to work fine with yarn

[anthonyshew]

You're correct! pnpm has tighter symlinking for packages than yarn so modules don't leak.

The way you've solved it is great! I wouldn't call it a workaround at all. Rather, it's mostly "how ESLint and typescript-eslint work". However, with ESLint's new coming-soon "flat configs", this will look a lot different soon.