Webpack "Cannot find module" for "module": "esnext"

Question

I have a webpack project with this in my "main.ts" module:

import {Elm} from "./MainModule";

it fails with:

TS2307: Cannot find module './MainModule'.

but when I switch my "tsconfig.json" from "module": "esnext" to "module": "commonjs", it works.

However, I need "esnext" in order to have code splitting.

Thoughts?

Descent

Try setting moduleResolution to node in tsconfig – Barnstorm

@samdd beautiful. Put it in an answer. – Descent

Answer 1

I had the same issue, adding "moduleResolution": "node", to tsconfig.json seems to have fixed it.

More info on it here: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Brainwashing

I'm seeing this answer in a few places, but this did not solve the issue for me. – Lecialecithin

Answer 2

When you set your type to "module" in your package.json file you enable ESM modules in your project.

{
  "type": "module"
}

But this means that Node gets strict about how it locates your import files (Module Resolution). It requires file extensions on all your import statements. If you want to import a typescript (.ts) file, and you do this

import blah from './blah.ts'; // Wrong

You will get an error because typescript inconveniently removes the .ts extension from this import statement when it compiles this file. It will compile without errors, but then fail at runtime because node needs that file extension. If you instead omit the extension and do this:

import blah from './blah'; // Wrong

Typescript will leave the extension off and compile it just fine but node will again complain at runtime. It turns out you can just import .ts files with a .js extension and Typescript will compile it and leave the extension alone.

import blah from './blah.js'; // Correct

Also try setting module and moduleResolution to "Node16"

"compilerOptions": {
  "module": "Node16",
  "moduleResolution": "Node16",
  ...
}

Ailina

Answer 3

My answer on this other post might be relevant: https://mcmap.net/q/127702/-appending-js-extension-on-relative-import-statements-during-typescript-compilation-es6-modules

Summary: the swc compiler can add the .js extension automatically when compiling, using the resolveFully and baseurl options. After that, nodejs can run the output and resolve the import correctly.

Propraetor