Unable to specify custom config loader in Node 20 (--loader tsx)

[fregante]

Describe the bug

Up until Node 18, I could use a --loader node flag to pick a custom TypeScript loader, but in Node 20 this no longer appears to work.

NODE_OPTIONS="--loader tsx" npx webpack

What is the current behavior?

It can't load my .ts config.

(node:84039) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[webpack-cli] Unable load './webpack.config.ts'
[webpack-cli] Unable to use specified module loaders for ".ts".
[webpack-cli] Cannot find module 'ts-node/register' from '.'
[webpack-cli] Cannot find module 'sucrase/register/ts' from '.'
[webpack-cli] Cannot find module '@babel/register' from '.'
[webpack-cli] Cannot find module 'esbuild-register/dist/node' from '.'
[webpack-cli] Cannot find module '@swc/register' from '.'
[webpack-cli] Please install one of them

To Reproduce

npm init -y
npm install tsx webpack webpack-cli
echo 'export default {}' > webpack.config.ts
NODE_OPTIONS="--loader tsx" npx webpack

Expected behavior

Webpack uses the tsx loader to load the .ts configuration. This is the output on Node 18:

(node:84137) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:84137) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:84137) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
(node:84137) ExperimentalWarning: Custom ESM Loaders is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
assets by status 99 bytes [cached] 1 asset

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ETC..
ETC..
ETC..

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

  System:
    OS: macOS 13.4.1
    CPU: Intel i9
    Memory: 36.54 MB / 16.00 GB
  Binaries:
    Node: 20.1.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 9.6.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
  Packages:
    webpack: ^5.88.2 => 5.88.2 
    webpack-cli: ^5.1.4 => 5.1.4 
  Global Packages:
    webpack-cli: 4.6.0
    webpack: 5.31.0

Additional context

Also reported in the loader’s repo, but I don’t think this can be fixed there:

• Webpack loader broken on Node 20 privatenumber/tsx#279

ts-node also has issues on Node 20:

• ERR_UNKNOWN_FILE_EXTENSION on Node v20.0.0 TypeStrong/ts-node#1997

[fregante]

It's not entirely clear how the loader previously reached the require since --loader is not supported by the underlying rechoir dependency:

• Support for esm.ts using node --loader ts-node/esm gulpjs/rechoir#43

My guess is that interpret or rechoir are suddenly exiting early even if Node "natively" supports .ts files (via global --loader). Until Node 18, they probably let the .ts extension through.

[fregante]

The key is that Node 20 changed the flag to --import and didn't add a warning until a later minor version. 🤷‍♂️

- NODE_OPTIONS="--loader tsx" npx webpack
+ NODE_OPTIONS="--import tsx" npx webpack