ERROR [preprocess]: Can not load "webpack"! (webpack@2.2.1; karma@1.4.1)

Question

I try to get my karma tests running with webpack@^2.2.1 and karma@1.4.1. But all i get is this Error:

ERROR [preprocess]: Can not load "webpack"!
  Error
    at webpack (/Users/plano/S/plano/projects/scheduler.frontend.ng2/node_modules/webpack/lib/webpack.js:19:9)
    at new Plugin (/Users/plano/S/plano/projects/scheduler.frontend.ng2/node_modules/karma-webpack/lib/karma-webpack.js:65:18)
    at invoke (/Users/plano/S/plano/projects/scheduler.frontend.ng2/node_modules/di/lib/injector.js:75:15)
    ...

All solutions that i found are about a bug in karma@0.12.x (e.g. this github issue and this stackoverflow quertion). Im on 1.4.1 so they aren’t helpful for me.

This post tells me to remove entry: {} from webpack config. I have no entry: {} on my webpack config.

According to this stackoverflow answer it’s an webpack issue since 2.2.0-rc.4. So i tried 2.2.0-rc.3. Nothing changed.

My karma.conf.js:

'use strict';

module.exports = config => {
    config.set({
        autoWatch: true,
        browsers: ['Chrome', 'PhantomJS'],
        files: [
            '../node_modules/es6-shim/es6-shim.min.js',
            'karma.entry.js'
        ],
        frameworks: ['jasmine'],
        logLevel: config.LOG_INFO,
        phantomJsLauncher: {
            exitOnResourceError: true
        },
        port: 9876,
        preprocessors: {
            'karma.entry.js': ['webpack', 'sourcemap']
        },
        reporters: ['dots'],
        singleRun: true,
        webpack: require('../webpack/webpack.test.js'),
        webpackServer: {
            noInfo: true
        }
    });
};

My webpack.test.js:

'use strict';

const path = require('path');
const webpack = require('webpack');

module.exports = {
    devtool: 'inline-source-map',
    module: {
        preLoaders: [
            { exclude: /node_modules/, loader: 'tslint', test: /\.ts$/ }
        ],
        loaders: [
            { loader: 'raw', test: /\.(css|html)$/ },
            { exclude: /node_modules/, loader: 'ts', test: /\.ts$/ },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.ts'],
        modulesDirectories: ['node_modules'],
        root: path.resolve('.', 'src')
    },
    tslint: {
        emitErrors: true
    }
};

@Aravind it is based on [this tutorial](https://semaphoreci.com/community/tutorials/setting-up-angular-2-with-webpack) / [this repo](https://github.com/gonzofish/semaphore-ng2-webpack).. which was initially running on **webpack@^1.13.1**. Tests where running too, but are not running anymore since webpack 2 update. See [package.json](https://github.com/gonzofish/semaphore-ng2-webpack/blob/master/package.json) — DerZyklop, Feb 12 '17 at 14:32
@Aravind thanks to your comment i try to upgrade based on the plain tutorial repo. i'll keep you updated here. — DerZyklop, Feb 12 '17 at 14:39
at first i had to [solve this](https://github.com/gonzofish/semaphore-ng2-webpack/pull/4/commits/a90d193888cdb0605bed88880c7afc10e0990f4d). tests were ok. next i installed latest versions **webpack@2.2.1** and **karma-webpack@2.0.2**. tests broken. — DerZyklop, Feb 12 '17 at 14:55

score 2 · Answer 1 · answered Dec 01 '20 at 18:19

2

I got this error when I'd forgotten to add the webpack: option to my Karma config.

answered Dec 01 '20 at 18:19

joeforker

40,459
37
151
246

score 0 · Accepted Answer · answered Feb 13 '17 at 12:49

Solved.

I had an option like this in my webpack.test.js:

tslint: {
    emitErrors: true
}

Webpack 2 has a very strict configuration. Now it looks like this:

plugins: [
    ...
    new LoaderOptionsPlugin({
        options: {
            emitErrors: true
        }
    }),
]

More info here: https://github.com/gonzofish/semaphore-ng2-webpack/pull/4#issuecomment-279374763

ERROR [preprocess]: Can not load "webpack"! (webpack@2.2.1; karma@1.4.1)

2 Answers2