Unable to specify custom config loader in Node 20 (`--loader tsx`)
fregante opened this issue · 2 comments
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:
ts-node
also has issues on Node 20:
It's not entirely clear how the loader previously reached the require
since --loader
is not supported by the underlying rechoir
dependency:
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.
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