How to make a TypeScript turborepo with a new flat ESLint config?

[rinart73]

Summary

I decided to use "with Vite" (https://github.com/vercel/turbo/tree/main/examples/with-vite) example as a base.
I followed the official typescript eslint instruction for flat config. Here is the resulting package.json:

{
  "name": "@repo/eslint-config",
  "version": "0.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@eslint/js": "^9.0.0",
    "eslint-config-prettier": "^9.1.0",
    "typescript-eslint": "^7.6.0"
  },
  "publishConfig": {
    "access": "public"
  }
}

I changed "/packages/config-eslint/index.js" to look like this:

// @ts-check

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  ...tseslint.configs.stylisticTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {},
  }
);

Now the question is how to actually share this config with other packages. I tried to replace "/packages/ui/.eslintrc.cjs" with "eslint.config.js" with the following contents:

import config from "@repo/eslint-config/index.js";

export default config;

But linting doesn't work.

Additional information

No response

Example

No response

[anthonyshew]

Duplicate of #7909

We're trying to figure it out, too. 😄