[4.0.2] ERROR [preprocess]: Can not load "webpack"!

[ViieeS]

I got this error after update from 4.0.0-rc.6 to 4.0.2.

18 06 2019 16:32:50.308:ERROR [preprocess]: Can not load "webpack"!
  SyntaxError: Invalid flags supplied to RegExp constructor 'null'
    at new RegExp (<anonymous>)
    at cloneRegExp (/user/app/node_modules/karma-webpack/node_modules/shallow-clone/index.js:52:14)
    at clone (/user/app/node_modules/karma-webpack/node_modules/shallow-clone/index.js:42:14)
    at cloneDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:18:14)
    at cloneObjectDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:30:18)
    at cloneDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:14:14)
    at cloneArrayDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:40:14)
    at cloneDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:16:14)
    at cloneObjectDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:30:18)
    at cloneDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:14:14)
    at cloneObjectDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:30:18)
    at cloneDeep (/user/app/node_modules/karma-webpack/node_modules/clone-deep/index.js:14:14)
    at Plugin (/user/app/node_modules/karma-webpack/dist/karma-webpack.js:68:20)
    at invoke (/user/app/node_modules/di/lib/injector.js:75:15)
    at Array.instantiate (/user/app/node_modules/di/lib/injector.js:59:20)
    at get (/user/app/node_modules/di/lib/injector.js:48:43)
    at /user/app/node_modules/di/lib/injector.js:71:14
    at Array.map (<anonymous>)
    at Array.invoke (/user/app/node_modules/di/lib/injector.js:70:31)
    at Injector.get (/user/app/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/user/app/node_modules/karma/lib/preprocessor.js:50:20)
    at Array.forEach (<anonymous>)

• Operating System: CentOS 6
• Node Version: 10.15.0
• NPM Version: 6.9.0
• webpack Version: 4.34.0
• karma-webpack Version: 4.0.2

Code

karma.conf.js

require('@babel/register');
const path = require('path');
const webpack = require('webpack');
const webpackConf = require('./webpack.config.babel').default;

module.exports = function (config) {

    webpackConf.resolve.alias.test = path.resolve(__dirname, './src/test/');

    config.set({

        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: __dirname,

        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['jasmine'],

        // list of files / patterns to load in the browser
        files: [
            'src/test.es6'
        ],

        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            'src/test.es6': ['webpack']
        },

        webpack: webpackConf,
        webpackMiddleware: {
            noInfo: true,
            stats: "errors-only"
        },

        // test results reporter to use
        // possible values: 'dots', 'progress', 'spec'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['spec'],

        // web server port
        port: 9876,

        // enable / disable colors in the output (reporters and logs)
        colors: true,

        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,

        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: false,

        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        // You may use 'ChromeCanary', 'Chromium' or any other supported browser
        browsers: ['ChromeHeadlessNoSandbox'],
        // you can define custom flags
        customLaunchers: {
            ChromeHeadlessNoSandbox: {
                base: 'ChromeHeadless',
                flags: ['--no-sandbox']
            }
        },

        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true,

        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity
    })
};

[schmkr]

Running into this same error, while trying to upgrade from karma v3.1.0 to 4.1.0 and karma-webpack 3.0.0 to 4.0.2.

These are the module.rules of the used webpack configuration:

[{
    "test": /.+i18n[\/\\](.*)\.yaml/,
    "use": [{
        "loader": "raw-loader"
    }, {
        "loader": "yaml-loader"
    }]
}, {
    "test": /\.(gif|ico|jpg|png|svg|txt)$/,
    "use": [{
        "loader": "url-loader"
    }]
}, {
    "test": /\.html$/,
    "use": [{
        "loader": "html-loader",
        "options": {
            "attrs": ["img:src", ":ng-src"],
            "minimize": true
        }
    }]
}, {
    "test": /\.tsx?$/,
    "use": [{
        "loader": "ng-annotate-loader"
    }, {
        "loader": "ts-loader",
        "options": {
            "experimentalFileCaching": true,
            "transpileOnly": true
        }
    }]
}, {
    "test": /\.scss$/,
    "use": [{
        "loader": "null-loader"
    }]
}]

[ryanclark]

Can you both post your entire webpack config? It appears its failing to clone it when it gets to a regular expression somewhere

[schmkr]

I managed to launch Karma with a Chrome debugger, and got the place where the error is coming from and found it is this issue jonschlinkert/shallow-clone#4 and was fixed in v3.0.1 of that project.

Seems like updating shallow-clone to that version, should solve this issue.

[PhilipAnd]

I am experiencing the same issue. @schmkr what do you mean with shallow clone?

[schmkr]

I meant with that this project depends on the clone-deep package which has a dependency on shallow-clone. That package, seems to have fixed the Invalid flags supplied to RegExp constructor error in version 3.0.1 and if I recall correctly at the time of writing previous comment, the installed version of shallow-clone was not yet 3.0.1

[trusktr]

I was totally mistaken, deleted this post

[trusktr]

I was mistaken: the Can not load "webpack"! message simply happens any time there's any error in the plugin. In my case, the plugin tries to interact with older Webpack APIs that don't exist in the newer Webpack that I have installed, so I needed to downgrade Webpack.

[ADataGMan]

At some point when I got this something removed my install of webpack. The steps I took that seemed to matter was: npm uninstall karma-webpack npm i karma-webpack@4.0.0-rc.6 --save-dev npm install webpack --save-dev

At this point it worked with version 4.0.0-rc6. I have no idea when webpack was uninstalled, but it was missing at some point.

After all that I ran: npm uninstall karma-webpack npm i karma-webpack --save-dev

This then worked with the latest version.

[codymikol]

Can anyone on an older build let me know if this is fixed with version 5.0.0-alpha.6 ? I believe it should be compatible with webpack 4.

[codymikol]

Closing this as this does not seem to be an issue in 5.0.0, if you are still having trouble, feel free to open another issue and I'll assist as best I can!