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

[kasir-barati]

Here right solution:

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

Cannot be easily done in tools and build systems like Nx.

[alexander-akait]

@kasir-barati You can use https://nodejs.org/api/cli.html#node_optionsoptions

[xav-ie]

It seems that loaders are being deprecated or something:

❯ NODE_OPTIONS="--loader ts-node/esm" npx webpack
(node:28958) ExperimentalWarning: `--experimental-loader` may be removed
in the future; instead use `register()`:
--import 'data:text/javascript,import { register } from "node:module"; im
port { pathToFileURL } from "node:url"; register("ts-node/esm", pathToFil
eURL("./"));'
(Use `node --trace-warnings ...` to show where the warning was created)

To get rid of the ugly output, you must use this asinine env:

NODE_OPTIONS="--import \"data:text/javascript,import { register } from 'node:module'; import { pathToFileURL } from 'node:url'; register('ts-node/esm', pathToFileURL('./'));\"" npx webpack

It is annoying to penalized this much for using ESM.

I would just recommend using .js with // @ts-check instead. i.e. (webpack.config.js):

// @ts-check

/** @type {import('webpack').Configuration} */
export const config = {
    // ... stuff
};

export default config;

You can then avoid the NODE_OPTIONS nonsense this way. Disadvantages are that running tsc will no longer report errors from your webpack config, but your LSP should be saving you there and you generally don't export your webpack for use in client code.