Have typescript compiler add file extensions (.js) when building

Question

In a typescript project I am working on, which runs both on node and in the browser (using the type = 'module in the html and package.json). However, it doesn't want to load files wihtout the .js extension at the end, and typescript is generating files that look like this:

import {foo, bar} from 'threeLetterWords';

This import fails both in node and in the browser, because it needs to find 'threeLetterWords.js'. How do I make the TSC auto add those .js extensions to the end of the imports?

My `tsconfig.json':

{
  "compilerOptions": {
    "outDir": "./Build",
    "target": "ES6",
    
  }
}

And my file structure:

root  
  |___Build  
  |     |__(the root directory except for the build folder)  
  |  
  |__Public  
  |    |__scripts
  |    |     |__main.js  
  |    |     |__threeLetterWords.js  
  |    |__index.html
  |
  |__Server Logic
  |     |__threeLetterWordsServer.js
  |
  |__app.js
  |__package.json
  |__tsconfig.json

I have seen Typescript compiler is forgetting to add file extensions to ES6 module imports? , but that question was asked 3 years ago, and was vscode auto imports are extension-less, so I would have to change a lot (100+) by hand.

Has any progress been made, and if so what to do to fix this?

Answer 1

threeLetterWords.js and threeLetterWords are two different modules. The string .js has absolutely no magic meaning whatsoever in a module URI.

If you want to use the module threeLetterWords you have to tell TypeScript to use the module threeLetterWords. If you want to use the module threeLetterWords.js you have to tell TypeScript to use the module threeLetterWords.js.

TypeScript will not, ever, change the module name that you told it to use. I have a project that depends on TypeScript not changing the module name because I am using the Node module loader to resolve the module to either a native extension, CommonJS module, or JSON Module.