Webpack-cli: Error: Unable to use specified module loaders for ".ts".

[Stanzilla]

Describe the bug

Hey there, just updated to wp-cli 4.1 an webpack 5.3 and getting the following error

What is the current behavior?

> webpack --mode development

[webpack-cli] Error: Unable to use specified module loaders for ".ts".
    at Object.exports.prepare (/home/stan/projects/work/vscode-core/node_modules/rechoir/index.js:58:11)
    at requireConfig (/home/stan/projects/work/vscode-core/node_modules/webpack-cli/lib/groups/ConfigGroup.js:70:17)
    at Array.map (<anonymous>)
    at resolveConfigFiles (/home/stan/projects/work/vscode-core/node_modules/webpack-cli/lib/groups/ConfigGroup.js:124:40)
    at module.exports (/home/stan/projects/work/vscode-core/node_modules/webpack-cli/lib/groups/ConfigGroup.js:233:11)
    at WebpackCLI._baseResolver (/home/stan/projects/work/vscode-core/node_modules/webpack-cli/lib/webpack-cli.js:68:38)
    at /home/stan/projects/work/vscode-core/node_modules/webpack-cli/lib/webpack-cli.js:198:30
    at async WebpackCLI.runOptionGroups (/home/stan/projects/work/vscode-core/node_modules/webpack-cli/lib/webpack-cli.js:197:9) {
  failures: [
    { moduleName: 'ts-node/register', module: null, error: [Error] },
    {
      moduleName: 'typescript-node/register',
      module: null,
      error: [Error]
    },
    { moduleName: 'typescript-register', module: null, error: [Error] },
    { moduleName: 'typescript-require', module: null, error: [Error] },
    { moduleName: 'sucrase/register/ts', module: null, error: [Error] },
    { moduleName: '@babel/register', module: null, error: [Error] }
  ]
}

To Reproduce

My config:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');

const config = {
    target: 'node',

    entry: './src/extension.ts',
    output: {
        filename: 'extension.js',
        libraryTarget: "commonjs2",
        devtoolModuleFilenameTemplate: "../[resource-path]",
    },
    devtool: 'source-map',
    externals: {
        vscode: "commonjs vscode"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /\.ts$/,
            exclude: /node_modules/,
            use: [{
                loader: 'ts-loader',
                options: {
                    compilerOptions: {
                        "module": "es6"
                    }
                }
            }]
        }]
    },
};

module.exports = config;

Steps to reproduce the behavior:

1. webpack --mode development

Expected behavior

functioning build

Screenshots

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

Additional context

[alexander-akait]

You need to install something from:

failures: [
    { moduleName: 'ts-node/register', module: null, error: [Error] },
    {
      moduleName: 'typescript-node/register',
      module: null,
      error: [Error]
    },
    { moduleName: 'typescript-register', module: null, error: [Error] },
    { moduleName: 'typescript-require', module: null, error: [Error] },
    { moduleName: 'sucrase/register/ts', module: null, error: [Error] },
    { moduleName: '@babel/register', module: null, error: [Error] }
  ]

Without it we can't covert ts to js

[alexander-akait]

But I think we should improve the error message

[Stanzilla]

It was ts-node indeed, but yeah, error message needs improvements :)

[anshumanv]

will do, this err is coming from interpreting so maybe we can throw our own err if required packages are missing

[Stanzilla]

Thank you!

[soulofmischief]

I am getting this exact issue for .babel.js files, it says I'm missing @babel/register but it's present in my node_modules.

failures: [
    { moduleName: '@babel/register', module: null, error: [Error] },
    { moduleName: 'babel-register', module: null, error: [Error] },
    { moduleName: 'babel-core/register', module: null, error: [Error] },
    { moduleName: 'babel/register', module: null, error: [Error] }
  ]
}

Any idea what could be causing this? It just started happening out of nowhere and none of my package versions have changed. I've reverted the project to its last known good state and still get this error.

[alexander-akait]

You don't have @babel/register in node_modules no magic here

[soulofmischief]

@evilebottnawi @babel/register is in fact present in node_modules, or I wouldn't have posted the above comment. I stated above that it's present. Do you need a screenshot?

edit: I looked into it more tonight. @babel/core somehow got dropped off my dependencies list before the "last known good state" I was reverting to.

@babel/register was present, but not @babel/core, and this was causing the error claiming @babel/register was missing. Idk if webpack-cli is able to tell the difference, but in any case yes the error is misleading.

[anshumanv]

Thanks for checking @soulofmischief, yes it will be improved today

[chrishaack422]

It was ts-node indeed, but yeah, error message needs improvements :)

you are right