Imported TypeScript files in ``eslint.config.ts`` doesn't work

[ferferga]

The following structure is publicily available at https://github.com/jellyfin/jellyfin-vue

Steps to reproduce

1. Click on Code > Create codespace from master (or clone the repository locally)
2. cd frontend && npm run lint:inspect

Description

This an overview of the setup

• Using TypeScript configuration files with jiti v2. Looks like that is already covered
• A monorepo (called @jellyfin-vue/configs in my case) where TypeScript modules export factory functions for rule configs.
• Those factory functions are imported in frontend/eslint.config.ts, working perfectly with ESLint but not with the inspector.

[voxpelli]

I have a hard time understanding what it is that doesn’t work.

Can you maybe add a screenshot or something where you show what’s wrong or missing?

[ferferga]

@voxpelli I was able to better triage the issue and create a minimal reproduction: https://stackblitz.com/edit/vitejs-vite-9abzaz

Steps to reproduce

1. cd packages/configs and run npm run lint:inspect
2. ESLint config inspector will load successfully, since the TypeScript file imported is referenced from the same project
3. Change to the packages/main directory and run npm run lint:inspect there. The config inspector will fail to load with the following error, since the base rules are being imported from the monorepo:
   

Additional context

It looks like the issue exists when importing .ts files from node_modules in monorepo setups. Similar to what happens in Vite. Hence, the workarounds listed there are also applicable to this project

[KryziK]

I'm running into this same issue. I have two projects:

• An ESLint Shared Config project which directly exports .ts files instead of transpiling
• A consuming project whose eslint.config.ts simply re-exports the config from the above project

Running eslint (with any of --fix, --debug, --print-config) works just fine, but specifically only the inspector fails with:

ℹ Reading ESLint config from C:\project2\eslint.config.ts
Failed to load `eslint.config.js`.
Note that `@eslint/config-inspector` only works with the flat config format:
https://eslint.org/docs/latest/use/configure/configuration-files-new
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\project2\node_modules\project1\src\index.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:218:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:244:36)
    at defaultLoad (node:internal/modules/esm/load:122:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:483:32) {

I am not well-versed enough in js/ts/frontend to understand what I can do to work around this issue.

[antfu]

I don't think it's a good practice to ship .ts directly to npm, at least not until Node v23+, which ships the strip-types feature by default. I consider this as an expected behaviour as this is out-of-scope for jiti to handle files inside node_modules

[KryziK]

In my case, these are private, scoped packages that my team uses internally via Azure Artifacts.

[azu]

I encountered import issues in our monorepo setup.

I write custom rules in monorepo with flat config and import them directly from eslint.config.ts.
This method is convenient because it allows you to write the ESLint plugin in TypeScript without building it,

On the other hand, inspector no longer works.

Failed to load eslint.config.js.
Note that @eslint/config-inspector only works with the flat config format:
https://eslint.org/docs/latest/use/configure/configuration-files-new

Following example:

import { customPlugin } from "./packages/eslint-plugin-custom/index.ts";

export default [
  {
    files: ["**/*.ts"],
    plugins: {
      custom: customPlugin,
    },
    rules: {
      "custom/rule-name": "error",
      "custom/another-rule": "warn",
    },
  },
];

[acidoxee]

I've been bit by this issue, although I'm not importing anything through node_modules, workspaces or anything, just using relative imports (as my extensive config is split into several files for clarity).

My base config file is at the root of my monorepo. This file imports several other sub-configs, like so:

// eslint.config.ts

import { defineConfig, globalIgnores } from 'eslint/config';

import { baseConfig } from './config/eslint/configs/base.ts';
import { graphqlConfig } from './config/eslint/configs/graphql.ts';
import { importConfig } from './config/eslint/configs/imports.ts';
import { jsdocConfig } from './config/eslint/configs/jsdoc.ts';
import { nodeConfig } from './config/eslint/configs/node.ts';
import { promisesConfig } from './config/eslint/configs/promises.ts';
import { reactConfig } from './config/eslint/configs/react.ts';
import { regexpConfig } from './config/eslint/configs/regexp.ts';
import { testsConfig } from './config/eslint/configs/tests.ts';
import { tsConfig } from './config/eslint/configs/typescript.ts';

export default defineConfig([
  globalIgnores(
    [
      // ...
    ],
    'myCompany/defaults/ignores',
  ),
  baseConfig,
  graphqlConfig,
  importConfig,
  jsdocConfig,
  nodeConfig,
  promisesConfig,
  reactConfig,
  regexpConfig,
  testsConfig,
  tsConfig,
]);

Each of those configs share some utils, imported from config/eslint/utils.ts. In those utils, in order to not repeat it every time and be resilient to folder changes, I've made a rootDir variable like so:

// config/eslint/utils.ts

// This resolves to the root of the monorepo
export const rootDir = path.resolve(import.meta.dirname, '../..');

I've found that it was using import.meta.dirname that triggered the issue, as the config inspector infers the wrong value. ESLint itself does it perfectly, as does the vscode extension where everything works, but for some reason the config inspector doesn't have the right value, it seems to use the CWD instead of the module's actual dirname. I've had to modify the variable as such:

// config/eslint/utils.ts

export const rootDir = path.resolve(
  import.meta.dirname,
  process.env.ESLINT_INSPECT === 'true' ? '' : '../..',
);

I now use the following script in package.json to launch the inspector, and it works flawlessly everywhere:

{
  "scripts": {
    "eslint:inspect": "ESLINT_INSPECT=\"true\" yarn eslint-config-inspector"
  }
}

[github-actions]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.

[ferferga]

Keep open

[github-actions]

Oops! It looks like we lost track of this issue. What do we want to do here? This issue will auto-close in 7 days without an update.

[acidoxee]

Still there 😁