VS Code appends .js to auto imports

[thefrana]

Hi,
I was wondering if this behavior is normal. Since Typescript v5.2 (definitely on current v5.4) VS Code automatically add .js extension to all auto imports. I cannot change this through any VS Code or Typescript config. I would expect imports with no extension or with .ts extension. The main problem with .js extension is that it can sometimes break the build which is definitely not ideal.

Do you have any idea what can be causing this or how can I resolve it?

[kentcdodds]

I've noticed this happening recently as well. It's annoying though it doesn't actually negatively impact the functionality.

I would love a fix for this. I like keeping the extensions because I think it mimics native ESM better (which requires file extensions when referencing a file directly), but I could be convinced to just not bother I think.

I welcome anyone to dive in and see what can be done about this. I would definitely prefer to have the actual file extension be the one used in the code if possible.

[thefrana]

I also tried to dig into this problem and I have not found a complete solution. There was some discussion in VS Code repo about adding "typescript.preferences.importModuleSpecifierEnding": "ts" option.

[kentcdodds]

I wonder if the problem has something to do with the imports config in package.json 🤔

[Klukies]

I'm pretty sure that this is in fact related to the imports config in package.json like Kent mentioned. I've been trying to get imports working without paths in tsconfig as this feature is now natively supported in TypeScript since 5.4.0. However, having this enabled will always add a .js extensions regardless of the config I apply.

I personally don't agree with having file extensions, due to the fact that I think barrel files are still usefull in some situations and importing from an index.(js|ts) file feels weird. The only way to get this behaviour to work is to (sadly) remove the imports config in package.json

[kentcdodds]

That sounds like a bug in TypeScript then. Anyone want to open an issue (or find one to up vote)?

[PabloCorso]

I'm trying the following but not sure if the imports is actually needed or if this could be a proper workaround:

1. Remove imports from package.json.
2. Add resolve.alias in vite.config.ts:

import path from 'node:path';

export default defineConfig({
  resolve: {
    alias: {
      '#app': path.resolve(__dirname, 'app'),
      '#tests': path.resolve(__dirname, 'tests'),
      '@': path.resolve(__dirname, 'app/components/ui/icons'),
    },
  },
};

3. Import suggests aliases with proper extensions with this workspace settings at .vscode/settings.json:

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.importModuleSpecifierEnding": "js"
}

[theskillwithin]

For me I have a similar strange behavior. all imports work as expected in Remix.

however when I run Playwright, it wants all js imports in my app thats shared with it, to all the sudden to have a .js extension

Error: Cannot find module '/node_modules/lodash/groupBy' imported from /app/utils/question.ts
Did you mean to import "lodash/groupBy.js"?

[jacobparis]

if tsconfig#moduleResolution is set to ESNext it will ask for extensions, if it's set to Bundler then it's ok without them

[thefrana]

VS Code's import resolution behavior seems inconsistent. When resolving relative path imports, it omits the .js extension. However, for imports using aliases (e.g., #app), it includes the .js extension. I've tried adjusting the "typescript.preferences.importModuleSpecifierEnding" setting, but none of the options achieve consistent behavior across both import types. I am not sure if this behavior was caused by some update or just did not notice before.

[Noriller]

I think it might be related to this:

https://www.totaltypescript.com/relative-import-paths-need-explicit-file-extensions-in-ecmascript-imports