Resolving .js file extensions to .ts file extensions in imports

[kylerush]

I love this project. I'm very excited to get it up and running.

The problem I'm running into is that my example.ts file has an import in it like this:

import { environmentConfig } from "../src/environment-config.js";

The file that actually points to is "../src/environment-config.ts".

ts-node-esm example.ts seems to handle the module resolution for me magically; it just works. Additionally, when I build from project with typescript, it also just works because the .ts files get changed to .js, so the ".js" file extension in the import paths points to the right file when I execute the file with Node: node example.js.

It seems ideal to me to keep this configuration. However, I cannot get the eslint-plugin-import to resolve ".js" to ".ts" in my imports. I've spent a few hours on it, looking for resolvers on NPM that might do this and trying to write my own resolver. I didn't find anything on NPM and in writing my own resolver, I realized that module resolution is a bit more complex than I anticipated. I also looked at eslint-import-resolver-typescript, but that seems to be created to support .ts file extensions in your imports, which I do not have. I've also tried searching the issues on this repo and was not able to find anything related.

I am wondering if there is something simple that I am missing to achieve this. I am not particularly knowledgable about module resolution, or the best way to make all of this work. If possible, any thoughts/help would be greatly appreciated. Thank you very much.

Here is my .eslintrc.cjs:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ["./tsconfig.json"],
  },
  plugins: ["@typescript-eslint", "prettier", "import"],
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:@typescript-eslint/strict",
    "prettier",
    "plugin:import/recommended",
  ],
  env: {
    node: "true",
  },
};

[terenceodonoghue]

I'm using eslint-import-resolver-typescript in an ESM project - the below config in my .eslintrc.cjs matches the .js in the import statement to the .ts on the underlying filesystem and resolves the error.

  settings: {
    'import/resolver': {
      typescript: {
        alwaysTryTypes: true,
      },
    },
  },

[phryneas]

Also make sure to actually install eslint-import-resolver-typescript in addition to that config change.

[ljharb]

Sounds like this is answered.

[phryneas]

@ljharb actually, it only seems to work if eslint-import-resolver-typescript is not configured correctly - PR with tests incoming in a moment :)

[0x80]

I tried to follow the instructions and installed the eslint-import-resolver-typescript package but somehow I'm still getting errors on my .js imports that should map to .ts files.

Below is my full config, in case it helps.

Any news on the pending draft for extensionAlias? @phryneas

// @ts-check
const { defineConfig } = require("eslint-define-config");

module.exports = defineConfig({
  extends: [
    "prettier",
    "turbo",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/typescript",
  ],
  parser: "@typescript-eslint/parser",
  settings: {
    "import/resolver": {
      typescript: { alwaysTryTypes: true },
      node: true,
    },
  },
  parserOptions: {
    project: "./tsconfig.json",
  },
  rules: {
    "@typescript-eslint/no-unused-vars": [
      "error",
      { args: "after-used", argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
    ],
    "@typescript-eslint/no-floating-promises": "error",
    "@typescript-eslint/no-misused-promises": "error",
    "@typescript-eslint/consistent-type-imports": "warn",
    "@typescript-eslint/consistent-type-definitions": ["warn", "type"],
    "@typescript-eslint/no-import-type-side-effects": "warn",
    "array-callback-return": "warn",
    "unused-imports/no-unused-imports": "warn",
    "no-template-curly-in-string": "error",
    "turbo/no-undeclared-env-vars": "off",
  },
  plugins: ["@typescript-eslint", "unused-imports", "import"],
  ignorePatterns: ["**/node_modules/**", "**/dist/**", "/*.*"],
});

[marklai1998]

any update here? I'm having issue in a project that uses nodeNext + Typescript

eslint-import-resolver-typescript doesnt seems to work for me as well

[JounQin]

I don't understand what's the issue with typescript resolver, please provide minimal but runnable online reproduction.

I'd like to close this issue here, if you have further question, you should raise issue on TypeScript resolver's side.

[karlhorky]

@JounQin I believe that the inability of import/extensions to map .js imports to .ts files on disk (and .jsx to .tsx, etc) is the same issue as @phryneas clarified over here in the other repo eslint-import-resolver-typescript:

• Missing file extension "ts" for [...] / passing through enhanced-resolve's options. eslint-import-resolver-typescript#233 (comment)

Seems like there's also a PR open for that here in the eslint-plugin-import repo:

• extensions: use the extensionAlias option of import-resolver-typescript #2813