[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.

[eelkevdbos]

@ljharb, I'm sorry, I thought this was convenient for brevity. I compiled the configuration to json through: eslint --print-config .eslintrc.json > .eslintrc.full.json. Settings excerpt below is the result of this.

{
  ...
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".jsx",
          ".json",
          ".ts",
          ".tsx",
          ".d.ts"
        ]
      }
    },
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts",
        ".tsx",
        ".d.ts"
      ]
    },
    "import/extensions": [
      ".js",
      ".mjs",
      ".jsx",
      ".ts",
      ".tsx",
      ".d.ts"
    ],
    "import/external-module-folders": [
      "node_modules",
      "node_modules/@types"
    ],
    "react": {
      "pragma": "React",
      "version": "detect"
    },
    "propWrapperFunctions": [
      "forbidExtraProps",
      "exact",
      "Object.freeze"
    ],
    "import/core-modules": [],
    "import/ignore": [
      "node_modules",
      "\\.(coffee|scss|css|less|hbs|svg|json)$"
    ]
  },
  "ignorePatterns": [
    "node_modules",
    "dist",
    "vendor"
  ]
}

On first sight, this seems like a valid configuration. However, without setting "import/extensions": "off", it seems to get stuck in a state where it finds the import should have an extension. Once I add the extension to the import (.tsx), eslint fails again, mentioning that it is not expecting tsx files to be imported with an extension. A collision of rules so to say.

This resembles some of the issues that I came across for this project. I was also triggered by the 2.25.4 changelog stating #2334 was solved because it exactly uses the @/ aliases that for me triggers the issue. Saldy, as stated before, reverting to an older version does not solve the problem for me.

As a bonus weirdness: when I point eslint to the printed configuration, it fails to resolve the import path entirely. Apparently, the printed configuration is not a drop-in replacement for the config file using the "extends" syntax.

[ljharb]

Note how the resolver is set to “node”, and there’s no typescript resolver? That means the eslint config isn’t valid for typescript.

[eelkevdbos]

I've added the eslint-import-resolver-typescript package (as dev-dependency) and extended the config as follwing:

.eslintrc.typescript.json

{
  "plugins": ["import"],
  "rules": {
    "import/no-unresolved": "error"
  },
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {}
    }
  }
}

.eslintrc.json

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

With that setup, everything works perfectly! Thanks for the hint 💪

[eelkevdbos]

I noticed how the starter of this issue also has eslint-import-resolver-node in his lockfile and is missing the typescript one.

[ljharb]

Sounds like that's the solution, then, so I'll close this.

You may want to file an issue on airbnb-typescript so they can fix their config (and add the TS resolver as a peer dep)