Typescript transpiled code "*.js" missing in imports

Question

I have the following code (example):

User.ts

...
import { UserFavoriteRoom } from "./UserFavoriteRoom.js";
import { Room } from "./Room.js";
import { Reservation } from "./Reservation.js";
import { Message } from "./Message.js";
import { Review } from "./Review.js";
...

But when typescript transpiles the code into javascript, the result looks like this:

User.js

...
import { UserFavoriteRoom } from "./UserFavoriteRoom";
import { Room } from "./Room";
import { Reservation } from "./Reservation";
import { Message } from "./Message";
import { Review } from "./Review";
...

As you can see the .js is missing in the imports, and it is a huge problem because when I try to run the code this happens:

'Error [ERR_MODULE_NOT_FOUND]: Cannot find module: 'UserFavoriteRoom' imported from User.js

If I manually append the .js to userFavoriteRoom (the import inside the User.js file) for example, then the error goes away and another error like that happens with another import that doesn't have the .js at the end of the import.

Here is my tsconfig.json:

{
  "compilerOptions": {
    "rootDirs": [
      "src"
    ],
    "outDir": "dist",
    "lib": [
      "es2020",
      "esnext.asynciterable"
    ],
    "target": "es2020",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": [
      "node"
    ],
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
  },
}

And my package.json: (I am using node 18.16.0)

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc --build tsconfig.json",
    "start": "npm run build && node ./dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "dependencies": {
    "@apollo/server": "^4.7.5",
    "class-validator": "^0.14.0",
    "graphql": "^16.7.1",
    "mysql": "^2.18.1",
    "reflect-metadata": "^0.1.13",
    "type-graphql": "^2.0.0-beta.2",
    "typeorm": "^0.3.17"
  },
  "devDependencies": {
    "@types/node": "^20.4.2",
    "typescript": "^5.1.6"
  }
}

What can I do to append the .js to the imports in the transpiled code automatically?

Just wanna say it's quite strange. I have roughly the same configuration, and I am required to add `.js` to typescript import statements, and they _do_ get retained in the output. — Evert, Aug 01 '23 at 01:58
@Evert I don't know why, but it suddenly started to work as expected, the only thing I remember I did was to try some compilerOptions, didn't work, then undo the changes, and it magically started worked as expected (even when I just did that before). I want to think that somehow something was cached and all I can recommend for now who has the same problem is to restart vscode, or even the computer. — Said Torres, Aug 01 '23 at 16:27

score 0 · Answer 1 · answered Jul 31 '23 at 23:05

0

Try adding the allowJs compiler flag to your Typescript configuration:

{
  "compilerOptions": {
    // ...
    "allowJs": true
  },
}

Docs: https://www.typescriptlang.org/tsconfig#allowJs

answered Jul 31 '23 at 23:05

Pádraig Galvin

1,065
8
20

Typescript transpiled code "*.js" missing in imports

1 Answers1