patternjavascriptCritical
Appending .js extension on relative import statements during Typescript compilation (ES6 modules)
Viewed 0 times
importrelativetypescriptes6modulescompilationduringstatementsextensionappending
Problem
This seems to be a trivial problem, but it is not very obvious what settings/configurations need to be used to solve this issue.
Here are the Hello World program directory structure and the source code:
Directory Structure:
index.ts:
HelloWorld.ts:
package.json:
Now, execution of the command
It is obvious that the problem seems to have been originated from the fact that in
Hope the context is clear.
Now, how to change the compiler output setting (tsconfig.json or any flags) so that local relative path imports such as `import {HelloWor
Here are the Hello World program directory structure and the source code:
Directory Structure:
| -- HelloWorldProgram
| -- HelloWorld.ts
| -- index.ts
| -- package.json
| -- tsconfig.jsonindex.ts:
import {HelloWorld} from "./HelloWorld";
let world = new HelloWorld();HelloWorld.ts:
export class HelloWorld {
constructor(){
console.log("Hello World!");
}
}package.json:
{
"type": "module",
"scripts": {
"start": "tsc && node index.js"
}
}Now, execution of the command
tsc && node index.js results in the following error:internal/modules/run_main.js:54
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'HelloWorld' imported from HelloWorld\index.js
Did you mean to import ../HelloWorld.js?
at finalizeResolution (internal/modules/esm/resolve.js:284:11)
at moduleResolve (internal/modules/esm/resolve.js:662:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:752:11)
at Loader.resolve (internal/modules/esm/loader.js:97:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
at ModuleWrap. (internal/modules/esm/module_job.js:50:40)
at link (internal/modules/esm/module_job.js:49:36) {
code: 'ERR_MODULE_NOT_FOUND'
}It is obvious that the problem seems to have been originated from the fact that in
index.ts Typescript file there is no .js extension in the import statement (import {HelloWorld} from "./HelloWorld";). Typescript didn't throw any error during compilation. However, during runtime Node (v14.4.0) wants the .js extension.Hope the context is clear.
Now, how to change the compiler output setting (tsconfig.json or any flags) so that local relative path imports such as `import {HelloWor
Solution
The possible work-arounds we have come across are as follows:
-
Use
For new files, it is possible to simply add
Example:
-
Extensionless filename
If working with old projects, rather than going through each and every file and updating the import statements, we found it easier to simply batch rename and remove the
-
Use regex to batch replace import statements
Another option is to use regular expression to batch find and replace in all files the import statements to add the
-
Use
.js extension in the import:For new files, it is possible to simply add
".js" extension in the import statement in TypeScript file while editing.Example:
import {HelloWorld} from "./HelloWorld.js";-
Extensionless filename
If working with old projects, rather than going through each and every file and updating the import statements, we found it easier to simply batch rename and remove the
".js" extension from the generated JavaScript via a simple automated script. Please note however that this might require a minor change in the server side code to serve these extension-less ".js" files with the proper MIME type to the clients.-
Use regex to batch replace import statements
Another option is to use regular expression to batch find and replace in all files the import statements to add the
.js extension. An example: https://stackoverflow.com/a/73075563/3330840 or similar other answers.Context
Stack Overflow Q#62619058, score: 115
Revisions (0)
No revisions yet.