[import/extensions] 2.22.0 still shows `without an extension` error for importing tsx files from tsx files

[asimkt]

Almost like #1615, but getting error on my Github CI which uses the same yarn.lock file.

    2:22  error    Missing file extension for "../../components/organisms/document"  import/extensions

my lock file:

eslint-plugin-import@^2.22.0:
  version "2.22.0"
  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.0.tgz#92f7736fe1fde3e2de77623c838dd992ff5ffb7e"
  integrity sha512-66Fpf1Ln6aIS5Gr/55ts19eUuoDhAbZgnr6UxK5hbDx6l/QgQgx61AePq+BV4PP2uXQFClgMVzep5zZ94qqsxg==
  dependencies:
    array-includes "^3.1.1"
    array.prototype.flat "^1.2.3"
    contains-path "^0.1.0"
    debug "^2.6.9"
    doctrine "1.5.0"
    eslint-import-resolver-node "^0.3.3"
    eslint-module-utils "^2.6.0"
    has "^1.0.3"
    minimatch "^3.0.4"
    object.values "^1.1.1"
    read-pkg-up "^2.0.0"
    resolve "^1.17.0"
    tsconfig-paths "^3.9.0"

EDIT
My yarn lock file had eslint-plugin-import@2.20.1 also present. The lint was working fine at my local system.

[doasync]

Add the following rule:

    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        mjs: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      },
    ],

[asimkt]

Closing this. Hardcoded 2.20.1 for now. Didn't get chance to reproduce.

[ljharb]

I'm going to reopen it; if something broke in a non-major, we need to fix it.

[yan-goncalves]

    "import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never",
          "tsx": "never",
          "js": "never",
          "jsx": "never"
        }
      ],
    settings: {
      'import/parsers': {
        '@typescript-eslint/parser': ['.ts', '.tsx'],
      },
      'import/resolver': {
        typescript: {},
      },
      "import/extensions": [
        ".js",
        ".jsx",
        ".ts",
        ".tsx"
      ]
    }

By adding that, it worked for me, maybe help you as well.

[ljharb]

@asimkt do those settings work for you?

[asimkt]

hey @ljharb, I didn't get a chance to recreate this issue. Busy with office work now. I will try to create one as soon as possible. I went ahead with 2.20.1 which solved the issue for me. (Hence closed this for now)

For future readers who have same issue: Could you please open a sandbox where the issue persists?

[kasomani]

    "import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never",
          "tsx": "never",
          "js": "never",
          "jsx": "never"
        }
      ],
    settings: {
      'import/parsers': {
        '@typescript-eslint/parser': ['.ts', '.tsx'],
      },
      'import/resolver': {
        typescript: {},
      },
      "import/extensions": [
        ".js",
        ".jsx",
        ".ts",
        ".tsx"
      ]
    }

By adding that, it worked for me, maybe help you as well.

Adding the Above did not help :(

[sorenhoyer]

I can confirm that the error still exists. Seems like you have to do either as @doasync suggested in #1857 (comment) or revert to a previous version.

[bcomnes]

I ran into a similar issue (e.g. jsx files not registering with this rule) and adding some settings to the resolver settings fixed the issue:

Inside eslint.json:

{
"settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".mjs", ".cjs", ".ts", ".tsx"]
      }
    }
  }
}

[eelkevdbos]

I am experiencing this issue as well, but specifically in combination with a path alias. My setup is as following:

.eslintrc.json

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "project": ["./tsconfig.json"]
  }
}

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "jsx": "react",
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["app/javascript/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules"],
  "compileOnSave": false
}

Importing something like import i18n from '@/application/i18n'; is met with the "Missing file extension for" error.

The issue disappears when I use a different path alias. For example adding "@@*": ["app/javascript/*"] as a path in tsconfig.json works fine.

My eslint-plugin-import version is 2.25.4. Reverting to 2.20.1 as described by @asimkt did not solve my problem.

[ljharb]

@eelkevdbos i'm not sure what airbnb-typescript does (because it's not actually from airbnb), but TS code needs to use the TS resolver.