Error [ERR_MODULE_NOT_FOUND] when using tsc

[agamm]

TypeScript Version: 4.1.2

Search Terms: esm, Error [ERR_MODULE_NOT_FOUND], internalBinding('errors')

Code

Where the directory strcture is:

src/
  handlers/
    index.ts
config.ts

config.ts

import IndexHandler from "./src/handlers/index";
IndexHandler()

index.ts

const IndexHandler = () => {
  console.log(1);
};

export default IndexHandler;

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "outDir": "./build"
  },
  "include": ["./src", "config.ts"],
  "exclude": ["./*/**.spec.js"]
}

package.json:

{
  "name": "example2",
  "version": "1.0.0",
  "description": "",
  "main": "build/config.js",
  "type": "module",
  "scripts": {
    "start": "npm run build && node ./build/config.js",
    "build": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Then run npm run start

Expected behavior:
A console.log(1) in stdout.

Actual behavior:

> example2@1.0.0 start F:\Development\test\example2
> npm run build && node ./build/config.js


> example2@1.0.0 build F:\Development\test\example2
> tsc

internal/modules/run_main.js:54
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\Development\test\example2\build\src\handlers\index' imported from F:\Development\test\example2\build\config.js
    at finalizeResolution (internal/modules/esm/resolve.js:277:11)
    at moduleResolve (internal/modules/esm/resolve.js:658:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:748:11)
    at Loader.resolve (internal/modules/esm/loader.js:97:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:243:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:42:40)
    at link (internal/modules/esm/module_job.js:41:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! example2@1.0.0 start: `npm run build && node ./build/config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the example2@1.0.0 start script.

Playground Link:
This is related to the files and imports, no way that I saw to do it in the playground.

Related Issues:
Nope.

** Extra info **

$ node --version
v14.15.1
$ tsc -v
Version 4.1.2

Windows 10 64 bit.

[xgqfrms]

you may have the wrong import path

in the experimental mode you need to define the full path with extension.

old ❌

config.ts

import IndexHandler from "./src/handlers/index";
IndexHandler()

new ✅

config.ts

import IndexHandler from "./src/handlers/index.js";
IndexHandler()

Why you need ES2020 as your build target, it just useful for testing new features, do not use it in your production.

[agamm]

you may have the wrong import path

in the experimental mode you need to define the full path with extension.

old ❌

config.ts

~ js import IndexHandler from "./src/handlers/index"; IndexHandler() ~

new ✅

config.ts

import IndexHandler from "./src/handlers/index.js";
IndexHandler()

Why you need ES2020 as your build target, it just useful for testing new features, do not use it in your production.

Thanks for the quick reply, it seems really werid to reference a file which really uses .ts as .js, will this be fixed?

[RyanCavanaugh]

This is the intended behavior; because TypeScript doesn't modify JavaScript code you write, the import path you write should be the one you want to appear in the output .js file

[agamm]

This is the intended behavior; because TypeScript doesn't modify JavaScript code you write, the import path you write should be the one you want to appear in the output .js file

I don't know if this is something I can relate to, but at least can there be a more indicative error/warning during the compiling process?

[typescript-bot]

This issue has been marked as 'Question' and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you're still waiting on a response, questions are usually better suited to stackoverflow.

[karlhorky]

This is the intended behavior; because TypeScript doesn't modify JavaScript code you write, the import path you write should be the one you want to appear in the output .js file

Very interesting, we rewrote a package to use the fully-specified ESM paths with .js and everything worked well!

...until we had to import some of these files in a second package that was consuming TypeScript via webpack (tried with both babel-loader and ts-loader):

gatsbyjs/gatsby#31077 (comment)

Then we got the opposite error, webpack + babel-loader could not resolve the .js file, (because there is no file on the filesystem?):

ERROR #98124  WEBPACK

Can't resolve './js-functions.js' in 'D:\upleveled-softwork\courses\packages\quizzes'

If you're trying to use a package make sure that './js-functions.js' is installed. If you're trying to use a local file make sure that the path is correct.

failed Building development bundle - 30.415s
ERROR in ../quizzes/index.ts 4:0-62
Module not found: Error: Can't resolve './js-functions.js' in 'D:\upleveled-softwork\courses\packages\quizzes'
...

[karlhorky]

Maybe this is actually a bug in either webpack itself or babel-loader / ts-loader:

webpack/webpack#13252

[semslam]

I was trying to import RockPaperScissor class in my controller and I was getting an error

RockPaperScissor.js

class RockPaperScissor{

constructor(gameMode) {
this.gameMode = gameMode;
this.API_RESPONSE = null;
this.consoleMode = new ConsoleMode();
this.gameComponents = new GameComponents();
}

}
export default RockPaperScissor;

humanMoves.controllers.js

import RockPaperScissor from "../../services/RockPaperScissor.js";

const rockPaperScissor = new RockPaperScissor("api");

// this is my configuration in package.json
package.json

"main": "server.js",
"type": "module",
"scripts": {
"dev": "node --experimental-specifier-resolution=node nodemon server"
},

// getting error

internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/ibrahim/test/rock-paper-cissors-game/services/GameComponents' imported from /Users/ibrahim/test/rock-paper-cissors-game/services/RockPaperScissor.js
at finalizeResolution (internal/modules/esm/resolve.js:276:11)
at moduleResolve (internal/modules/esm/resolve.js:699:10)
at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
at Loader.resolve (internal/modules/esm/loader.js:88:40)
at Loader.getModuleJob (internal/modules/esm/loader.js:241:28)
at ModuleWrap. (internal/modules/esm/module_job.js:56:40)
at link (internal/modules/esm/module_job.js:55:36) {
code: 'ERR_MODULE_NOT_FOUND'
}

[emeryao]

node --experimental-specifier-resolution=node ./build/config.js

works for me with node v18 and ts v4.8

[guotie]

this is really weird