TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts

[fregante]

Describe the bug

Webpack is unable to read Webpack’s config file in TypeScript if type is module. This is basically a duplicate of

• ESM in webpack.config.ts isn't supported if ts-node outputs ESM #2458

which reportedly has been fixed by

• test: ts esnext #2584

but it fails with the exact test config included in that PR.

What is the current behavior?

[webpack-cli] Failed to load './webpack.config.ts' config
[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts
    at new NodeError (node:internal/errors:329:5)
    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
    at Loader.getFormat (node:internal/modules/esm/loader:104:42)
    at Loader.getModuleJob (node:internal/modules/esm/loader:242:31)
    at async Loader.import (node:internal/modules/esm/loader:176:17)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async loadConfig (./node_modules/webpack-cli/lib/webpack-cli.js:1182:35)
    at async WebpackCLI.resolveConfig (./node_modules/webpack-cli/lib/webpack-cli.js:1290:38)
    at async WebpackCLI.createCompiler (./node_modules/webpack-cli/lib/webpack-cli.js:1670:22)
    at async WebpackCLI.buildCommand (./node_modules/webpack-cli/lib/webpack-cli.js:1785:20) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

To Reproduce

Steps to reproduce the behavior:

echo '{"type": "module"}' > package.json
echo 'export default {}' > webpack.config.ts
echo 'console.log("hello world")' > index.js
echo '{"compilerOptions":{"module":"esnext", "allowSyntheticDefaultImports":true}}' > tsconfig.json
npm install webpack-cli webpack typescript ts-node
npx webpack-cli --entry ./index.js --mode production

If you drop type:module it reverts to the regular Unexpected token 'export' error.

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.5.2
    CPU: (16) x64 Intel(R)
  Binaries:
    Node: 15.14.0 - /usr/local/bin/node (also tried with node 16)
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.7.6 - /usr/local/bin/npm
  Packages:
    webpack: ^5.51.1 => 5.51.1 
    webpack-cli: ^4.8.0 => 4.8.0 
  Global Packages:
    webpack-cli: 4.6.0
    webpack: 5.31.0

[fregante]

Repro and output (webpack.log) is also available at: https://github.com/fregante/webpack-sandbox/tree/main/ts-node-esm

[alexander-akait]

It was answered here #2458 (comment), we can't fix it on our side

[fregante]

we can't fix it on our side

Can you catch the error and display a possible solution?

https://twitter.com/fregante/status/1407043890562179075

[alexander-akait]

https://twitter.com/fregante/status/1407043890562179075

Maybe wrong link?

[fregante]

Correct link, I was showing what a good error looks like, which this isn't:

[webpack-cli] TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for ./webpack.config.ts

I wish tools caught these errors and suggested solutions instead of sending them on Google trips.

[fregante]

As ESM packages become more popular, it's only time before more people encounter issues related to them. Google brought me to a StackOverflow answer that was "remove type:module" and the Webpack-specific search showed a mind-boggling three results.

[alexander-akait]

But we showed the real error and why it happens, nothing to say more here, it should be improved on ts-node, because only they known it is ECMA output and no loader(s)

[alexander-akait]

Here right solution:

node --loader ts-node/esm node_modules/.bin/webpack-cli --entry ./index.js --mode production

[alexander-akait]

Only one thing valid here, we can add this to docs

[alexander-akait]

/cc @snitin315 @anshumanv We should improve our docs for ECMA modules (i.e. type: "module" in package.json) and typescript ECMA modules output:

1. node --loader ts-node/esm node_modules/.bin/webpack-cli --entry ./index.js --mode production
2. NODE_OPTIONS="--loader ts-node/esm" npx webpack-cli --entry ./index.js --mode production (simple)

[snitin315]

I will document it 👍🏻

[fregante]

I like the second one, without npx

[alexander-akait]

Added to docs