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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

7reactions
alexander-akaitcommented, Oct 30, 2020

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

6reactions
Stanzillacommented, Oct 28, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack tries to parse .ts files as .js even when .ts is first in in ...
Webpack is getting parser errors for the .ts files, and the errors are always where a typescript specific construct is introduced, so I...
Read more >
TypeScript - webpack
First install the TypeScript compiler and loader by running: npm install --save-dev typescript ts-loader. Now we'll modify the directory structure & the ...
Read more >
ts-loader - npm
Start using ts-loader in your project by running `npm i ts-loader`. There are 4308 other projects in the npm registry using ts-loader.
Read more >
webpack.config.ts and/or ts-loader stopped working seemingly ...
I've been experimenting with using Webpack and the dev server for ... [webpack-cli] Unable to use specified module loaders for ".ts".
Read more >
Using Webpack with TypeScript
ts . The module field tells Webpack how different modules will be treated. Our project is telling Webpack to use the babel-loader plugin...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found