Webpack: Failed to load config file when using typescript@5 moduleResolution of "bundler"

Question

I'm using [email protected] and [email protected] and [email protected]. I tried to use the new moduleResolution with value bundler that typescript@5 offers. I have also configured "type": "module" in package.json file.

I have configured my tsconfig.json file with these values:

        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "bundler",

I configured a webpack.config.prod.ts and I tried to build my application by running webpack --config ./webpack/webpack.config.prod.ts.

Then I got an error: [webpack-cli] Failed to load '/myProject/webpack/webpack.config.prod.ts' config

And

[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /myProject/webpack/webpack.config.prod.ts
    at new NodeError (node:internal/errors:393:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:121:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:605:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Answer 1

Looks like this is an ongoing issue. However it sounds like you can do the following:

https://github.com/webpack/webpack-cli/issues/2458
https://github.com/webpack/webpack-cli/issues/2916

FYI as of today for me to be able to import an ESM module (webpack plugin) from webpack.config.ts, I needed to add the following to the tsconfig.json:

{   // ...   
    "ts-node": {
      // Tell ts-node CLI to install the --loader automatically, explained below
      "esm": true,
      "compilerOptions": {
        "module": "CommonJS",
        "moduleResolution": "NodeNext",
       }
    }   
},   

... It's based on your responses above. "ts-node" itself works instead of TS_NODE_COMPILER_OPTIONS as already mentioned here, plus "esm": true replaces the need for passing --loader ts-node/esm to Node (see https://typestrong.org/ts-node/docs/imports).

node: v16.14.1 ts-node: v10.8.1 typescript: 4.7.3 webpack: 5.73.0 webpack-cli: 4.10.0