[import/extensions] Missing file extension after upgrade to v2.19.1 #1573

raymondsze · 2019-12-16T04:04:19Z

here is the configuration

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": { "jest": true, "browser": true },
  "parserOptions": {
    "project": "tsconfig.eslint.json",
    "sourceType": "module"
  },
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": 0,
    "import/prefer-default-export": "off",
    "import/no-default-export": "error",
    "import/no-unresolved": 0,
    "no-underscore-dangle": ["error", { "allow": ["__typename"] }],
    "@typescript-eslint/no-unused-vars": [2, { "args": "none" }],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": ["error", "ignorePackages", {
      "ts": "never",
      "tsx": "never",
      "js": "never",
      "jsx": "never",
      "mjs": "never"
    }]
  }
}

All import syntax (for ts and tsx files) got this kind of error

error  Missing file extension for "./Query"                import/extensions

This does not happen for v2.18.2.

The text was updated successfully, but these errors were encountered:

ljharb · 2019-12-16T06:53:02Z

What file does ./Query map to?

raymondsze · 2019-12-16T07:57:06Z

@ljharb Query.ts

ljharb · 2019-12-16T08:08:48Z

You also need to configure https://github.com/benmosher/eslint-plugin-import#importextensions so that the plugin knows how to resolve ts extensions. This is a bugfix in the latest release.

raymondsze · 2019-12-16T08:52:01Z

it does not work even I added it.
my file right now
.eslintrc.json

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": { "jest": true, "browser": true },
  "parserOptions": {
    "project": "tsconfig.eslint.json",
    "sourceType": "module"
  },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx", ".mjs"]
  },
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": 0,
    "import/prefer-default-export": "off",
    "import/no-default-export": "error",
    "import/no-unresolved": 0,
    "no-underscore-dangle": ["error", { "allow": ["__typename"] }],
    "@typescript-eslint/no-unused-vars": [2, { "args": "none" }],
    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
    "import/extensions": ["error", "ignorePackages", {
      "js": "never",
      "jsx": "never",
      "ts": "never",
      "tsx": "never",
      "mjs": "never"
    }]
  }
}

raymondsze · 2019-12-16T09:17:20Z

@ljharb
I found that my error looks like this
error Missing file extension for "./Query"
but not
error Missing file extension "ts" for "./Query"

but the Query file is a ts file...
added "": "never" solve the issue, but seems not make any sense...

ljharb · 2019-12-16T19:09:14Z

That seems very strange.

k8adev · 2019-12-16T22:14:22Z

I got this error after upgrade too 😞

ljharb · 2019-12-16T22:15:22Z

Are you using the typescript resolver?

garyking · 2019-12-17T02:09:36Z

I get the error, even with the following settings:

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

raymondsze · 2019-12-17T04:16:15Z

I found out the reason now. I am using ~ as alias of src folder in tsconfig path setting.
I changed the eslintrc.json to eslintrc.js and modify the resolver like the following, it works now.

const path = require('path');

module.exports = {
  extends: ['airbnb', 'prettier', 'prettier/react'],
  plugins: ['@typescript-eslint'],
  parser: '@typescript-eslint/parser',
  env: { jest: true, browser: true },
  parserOptions: {
    project: 'tsconfig.eslint.json',
    sourceType: 'module',
  },
  settings: {
    'import/resolver': {
+      webpack: {
+        config: {
+          resolve: {
+            alias: {
+              '~': path.join(__dirname, 'src/app'),
+            },
+            extensions: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],
+          },
+        },
+      },
    },
  },
  rules: {
    'react/jsx-props-no-spreading': 'off',
    'react/prop-types': 0,
    'import/prefer-default-export': 'off',
    'import/no-default-export': 'error',
    'import/no-unresolved': 0,
    'no-underscore-dangle': ['error', { allow: ['__typename'] }],
    '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
    'react/jsx-filename-extension': [1, { extensions: ['.tsx', '.jsx'] }],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
        mjs: 'never',
      },
    ],
  },
};

Instead of webpack environment.
I think https://www.npmjs.com/package/eslint-import-resolver-alias could do the same trick for node environment.

ljharb · 2019-12-17T06:48:41Z

Glad you figured it out!

geiszla · 2020-01-26T22:12:15Z

I have the same problem and I'm not using any alias in the path. I have these settings in .eslintrc:

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

Edit: For anyone looking for the answer, here's the latest conversation about the issue: #1615

ivanbanov · 2020-07-13T23:36:13Z

@raymondsze thank you very much for this #1573 (comment)

@ljharb the same error was happening to me but only on sublime/vscode, in the terminal the plugin was not notifying anything

Seems like the resolver is not working properly only on IDEs since this commit 982493d

ljharb · 2020-07-13T23:37:52Z

hm, i would not expect IDEs to use a query string in their paths (unless that was in the actual source)

ivanbanov · 2020-07-14T20:52:49Z

hey @ljharb I debugged it a bit more on my local env and in the end I found that the error is showing up because of some standardx problem on IDEs.

In the resolve package used by eslint-import-resolve-node (more specifically in this line https://github.com/browserify/resolve/blob/master/lib/sync.js#L84) it does not get the correct absolute path to resolve 🤷🏻‍♂️

Just like I mentioned before, the strange part is that in the terminal it works, but on vscode and sublime it reports the error

So seems like everything is 💯 on the eslint end

:)

nickzylstra · 2020-08-24T23:59:56Z

For anyone else who ends up here and doesn't find a fix - did you recently rename a file or directory by only changing the casing? Did you NOT use git mv to do it? Are you on a case insensitive file system like Mac OS? If so, for me it caused ESLint to say no problem in VS Code and zsh locally, but when run in Teamcity it failed with to missing extension and can't resolve path lints.

Rename your case sensitive files and directories this way:
https://stackoverflow.com/questions/11183788/in-a-git-repository-how-to-properly-rename-a-directory

tgwow · 2021-05-08T23:34:53Z

I get the error, even with the following settings:

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

I solved it by adding your config plus this one at rules property:

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

cf. - import-js/eslint-plugin-import#1573 (comment) - https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions

gotcs108 · 2021-09-16T18:48:21Z

For anyone else who ends up here and doesn't find a fix - did you recently rename a file or directory by only changing the casing? Did you NOT use git mv to do it? Are you on a case insensitive file system like Mac OS? If so, for me it caused ESLint to say no problem in VS Code and zsh locally, but when run in Teamcity it failed with to missing extension and can't resolve path lints.

Rename your case sensitive files and directories this way:
https://stackoverflow.com/questions/11183788/in-a-git-repository-how-to-properly-rename-a-directory

The worst part is vs code fix does it the wrong way.
Instead of queue it auto imported to Queue

Edit: Restarted vscode and it imported correctly. I guess the old name was cached somewhere. weird

Abhishek765Flyfin · 2021-10-12T07:04:00Z

@ljharb I found that my error looks like this error Missing file extension for "./Query" but not error Missing file extension "ts" for "./Query"

but the Query file is a ts file... added "": "never" solve the issue, but seems not make any sense...

Thanks, worked for me:

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

devgioele · 2021-11-18T15:37:13Z

I landed here with the same error, but the cause turned out to be another one.
Because Windows' and macOS' file systems are case insensitive, renaming files/directories by just changing their casing is not recognized by Git. Running GitHub Actions on Ubuntu, which has a case sensitive file system, causes eslint to not find the imported files.
See my stackoverflow answer for the solution.

bradennapier · 2022-02-10T08:32:57Z

One time this happens if the cache is dirty

try

rm -rf ./node_modules/.cache

sorry if been mentioned but wanted to provide a solution and in rush :-\

This can happen if you do a git merge while server is running etc and only solution I know of is to clean cache. Also seems to be mostly a problem for eslint-loader as i have only had the issue in projects I am using webpack so far.

inaciogu · 2022-02-10T14:51:57Z

Try a empty string instead of "error" in your rule. It works for me

sera0731 · 2022-03-24T18:20:05Z

I was able to resolve it through this config setup with eslint-import-resolver-alias :

settings: {
        'import/resolver': 
        {
            alias: {
                extensions: ['.js', '.jsx', '.ts', '.tsx'],
                map: [
                    ['@', path.join(__dirname, 'src')]
                ]
            },
        },
    },

nyngwang · 2022-03-26T14:36:46Z

To who wants to fu(k the world after debugging:

This is the simplest form:

  "extends": [
    "airbnb",
    "airbnb-typescript"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    "import/extensions": [ "error", "ignorePackages", { "": "never" } ],
  }

the important parts are: "airbnb-typescript", "project": YOUR_CONFIG(with this you will possibly need to update tsconfig.json's "include" too), "import/extensions": [ "error", "ignorePackages", { "": "never" } ],

I <3 airbnbbbbbb.

ljharb · 2022-03-26T14:38:38Z

(Just be aware that airbnb-typescript isn't actually from airbnb)

kabtamu-degifie · 2023-10-25T06:16:50Z

Just add this:

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

mrjackyliang · 2023-11-22T17:05:29Z

Wanted to add onto this as well, and this isn't just limited to my IDE (using WebStorm). I currently have a TypeScript ESM (yes, ESM) project with Airbnb configs as well. Sharing my config files below:

eslintrc.json

{
  "env": {
    "node": true
  },
  "extends": [
    "airbnb-base",
    "airbnb-typescript/base"
  ],
  "ignorePatterns": [
    "/build/**/*"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2022,
    "project": "./tsconfig.json",
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "root": true,
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "": "never"
      }
    ],
    "import/no-default-export": [
      "error"
    ],
    "import/prefer-default-export": [
      "off"
    ],
    "max-len": [
      "off"
    ],
    "no-console": [
      "off"
    ]
  }
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "./build",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "removeComments": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "strict": true,
    "target": "ESNext"
  },
  "include": [
    "./src"
  ]
}

ljharb · 2023-11-23T04:26:20Z

@mrjackyliang native ESM may work for some rules, but this plugin doesn't fully support it yet.

raymondsze changed the title ~~Missing file extension after upgrade to v2.19.1~~ [import/extensions] Missing file extension after upgrade to v2.19.1 Dec 16, 2019

ljharb closed this as completed Dec 16, 2019

ljharb reopened this Dec 16, 2019

ljharb added bug help wanted labels Dec 16, 2019

ljharb closed this as completed Dec 17, 2019

amywalkerdev mentioned this issue Dec 17, 2019

Dev Dependency updates bbc/simorgh#4975

Merged

6 tasks

rmainwork mentioned this issue Feb 5, 2020

Import mark-one into course planner seas-computing/course-planner#139

Merged

8 tasks

ivanbanov mentioned this issue Jul 14, 2020

Error only on IDEs standard/standardx#35

Open

deepanchal mentioned this issue Dec 11, 2022

WIP: Setup eslint, parsers, xo, etc CrisisCleanup/crisiscleanup-4-web#4

Closed

12 tasks

HiimKwak mentioned this issue Jul 30, 2023

Design: 랜딩페이지 기초 UI 작성 QRTaxi/QRTaxi_Web#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[import/extensions] Missing file extension after upgrade to v2.19.1 #1573

[import/extensions] Missing file extension after upgrade to v2.19.1 #1573

raymondsze commented Dec 16, 2019 •

edited

Loading

ljharb commented Dec 16, 2019

raymondsze commented Dec 16, 2019 •

edited

Loading

ljharb commented Dec 16, 2019

raymondsze commented Dec 16, 2019

raymondsze commented Dec 16, 2019 •

edited

Loading

ljharb commented Dec 16, 2019

k8adev commented Dec 16, 2019

ljharb commented Dec 16, 2019

garyking commented Dec 17, 2019

raymondsze commented Dec 17, 2019 •

edited

Loading

ljharb commented Dec 17, 2019

geiszla commented Jan 26, 2020 •

edited

Loading

ivanbanov commented Jul 13, 2020

ljharb commented Jul 13, 2020

ivanbanov commented Jul 14, 2020

nickzylstra commented Aug 24, 2020

tgwow commented May 8, 2021 •

edited

Loading

gotcs108 commented Sep 16, 2021 •

edited

Loading

Abhishek765Flyfin commented Oct 12, 2021

devgioele commented Nov 18, 2021 •

edited

Loading

bradennapier commented Feb 10, 2022 •

edited

Loading

inaciogu commented Feb 10, 2022

sera0731 commented Mar 24, 2022 •

edited

Loading

nyngwang commented Mar 26, 2022 •

edited

Loading

ljharb commented Mar 26, 2022

kabtamu-degifie commented Oct 25, 2023 •

edited

Loading

mrjackyliang commented Nov 22, 2023 •

edited

Loading

ljharb commented Nov 23, 2023

[import/extensions] Missing file extension after upgrade to v2.19.1 #1573

[import/extensions] Missing file extension after upgrade to v2.19.1 #1573

Comments

raymondsze commented Dec 16, 2019 • edited Loading

ljharb commented Dec 16, 2019

raymondsze commented Dec 16, 2019 • edited Loading

ljharb commented Dec 16, 2019

raymondsze commented Dec 16, 2019

raymondsze commented Dec 16, 2019 • edited Loading

ljharb commented Dec 16, 2019

k8adev commented Dec 16, 2019

ljharb commented Dec 16, 2019

garyking commented Dec 17, 2019

raymondsze commented Dec 17, 2019 • edited Loading

ljharb commented Dec 17, 2019

geiszla commented Jan 26, 2020 • edited Loading

ivanbanov commented Jul 13, 2020

ljharb commented Jul 13, 2020

ivanbanov commented Jul 14, 2020

nickzylstra commented Aug 24, 2020

tgwow commented May 8, 2021 • edited Loading

gotcs108 commented Sep 16, 2021 • edited Loading

Abhishek765Flyfin commented Oct 12, 2021

devgioele commented Nov 18, 2021 • edited Loading

bradennapier commented Feb 10, 2022 • edited Loading

inaciogu commented Feb 10, 2022

sera0731 commented Mar 24, 2022 • edited Loading

nyngwang commented Mar 26, 2022 • edited Loading

This is the simplest form:

ljharb commented Mar 26, 2022

kabtamu-degifie commented Oct 25, 2023 • edited Loading

mrjackyliang commented Nov 22, 2023 • edited Loading

ljharb commented Nov 23, 2023

raymondsze commented Dec 16, 2019 •

edited

Loading

raymondsze commented Dec 16, 2019 •

edited

Loading

raymondsze commented Dec 16, 2019 •

edited

Loading

raymondsze commented Dec 17, 2019 •

edited

Loading

geiszla commented Jan 26, 2020 •

edited

Loading

tgwow commented May 8, 2021 •

edited

Loading

gotcs108 commented Sep 16, 2021 •

edited

Loading

devgioele commented Nov 18, 2021 •

edited

Loading

bradennapier commented Feb 10, 2022 •

edited

Loading

sera0731 commented Mar 24, 2022 •

edited

Loading

nyngwang commented Mar 26, 2022 •

edited

Loading

kabtamu-degifie commented Oct 25, 2023 •

edited

Loading

mrjackyliang commented Nov 22, 2023 •

edited

Loading