Can anyone provide a webpack4 & Karma configuration that works?

Question

I recently upgraded to Webpack4 and I am running into issues where karma start will run my webpack build and then do nothing. Just sits there. I was curious if anyone had a webpack4 configuration and a karma configuration that works they could share.

"webpack": "4.16.3",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
"karma": "2.0.5",
"karma-jasmine": "1.1.2",
"karma-phantomjs-launcher": "1.0.4",
"karma-sourcemap-loader": "0.3.7",
"karma-spec-reporter": "0.0.32",
"karma-webpack": "^4.0.0-beta.0",

Here's my output from karma start:

$ karma start
ℹ ｢wdm｣: Hash: 360b6d1b4ac02d013d8d
Version: webpack 4.16.3
Time: 32233ms
Built at: 08/06/2018 12:40:39 PM
                                 Asset      Size            Chunks             Chunk Names
                           favicon.ico  1.37 KiB                    [emitted]
  f4769f9bdb7466be65088239c12046d1.eot  19.7 KiB                    [emitted]
  e18bbf611f2a2e43afc071aa2f4e1512.ttf  44.3 KiB                    [emitted]
 fa2772327f55d8198301fdb8bcfc8158.woff  22.9 KiB                    [emitted]
448c34a56d699c29117adc64c43affeb.woff2  17.6 KiB                    [emitted]
  491b1f354b54f531fc7e72297dc743bb.eot   366 KiB                    [emitted]
  8d6d7045614d86ef2b7e7313623ac6a2.svg  1.08 MiB                    [emitted]
  30a5429e6044e15a8e1d2abea8dd2385.ttf   365 KiB                    [emitted]
 c1aa4279f4f5c7c8254d23fbfd1f32c7.woff   366 KiB                    [emitted]
  89889688147bd7575d6327160d64e760.svg   106 KiB                    [emitted]
                         app.bundle.js   2.8 MiB               app  [emitted]  app
                               runtime  6.11 KiB           runtime  [emitted]  runtime
            tests.webpack.js.bundle.js   915 KiB  tests.webpack.js  [emitted]  tests.webpack.js
                     vendors.bundle.js  2.88 MiB           vendors  [emitted]  vendors
                               app.map   227 KiB               app  [emitted]  app
                  tests.webpack.js.map  34.6 KiB  tests.webpack.js  [emitted]  tests.webpack.js
                           vendors.map  8.23 MiB           vendors  [emitted]  vendors
                            index.html  1.53 KiB                    [emitted]
Entrypoint app = runtime vendors.bundle.js vendors.map app.bundle.js app.map
Entrypoint tests.webpack.js = runtime vendors.bundle.js vendors.map tests.webpack.js.bundle.js tests.webpack.js.map
[../node_modules/@aver/ui-scaffolding/src/alert-service/alert-on-load.js] ./node_modules/@aver/ui-scaffolding/src/alert-service/alert-on-load.js 4.78 KiB {vendors} [built]
[../node_modules/@aver/ui-scaffolding/src/components/end-user-agreement/end-user-agreement.js] ./node_modules/@aver/ui-scaffolding/src/components/end-user-agreement/end-user-agreement.js 518 bytes {vendors} [built]
[../node_modules/@aver/ui-scaffolding/src/components/header/header.js] ./node_modules/@aver/ui-scaffolding/src/components/header/header.js 4.83 KiB {vendors} [built]
[../node_modules/@aver/ui-scaffolding/src/components/privacy-policy/privacy-policy-page.js] ./node_modules/@aver/ui-scaffolding/src/components/privacy-policy/privacy-policy-page.js 523 bytes {vendors} [built]
[../node_modules/@aver/ui-scaffolding/src/index.js] ./node_modules/@aver/ui-scaffolding/src/index.js 3.6 KiB {vendors} [built]
[0] multi ./app.js 28 bytes {app}
[../node_modules/angular-mocks/angular-mocks.js] ./node_modules/angular-mocks/angular-mocks.js 116 KiB {vendors} [built]
[../node_modules/angular/angular.js] ./node_modules/angular/angular.js 1.18 MiB {vendors} [built]
[../node_modules/angular/index.js] ./node_modules/angular/index.js 48 bytes {vendors} [built]
[../tests.webpack.js] ./tests.webpack.js 294 bytes {tests.webpack.js} [built]
[./ sync recursive _test\.js$] ./app sync _test\.js$ 206 bytes {tests.webpack.js} [built]
[./app.js] ./app/app.js 789 bytes {app} [built]
[./app.less] ./app/app.less 1.15 KiB {app}
[./views/index.views.js] ./app/views/index.views.js 595 bytes {app} [built]
[./views/project-list/project-list_test.js] ./app/views/project-list/project-list_test.js 805 bytes {tests.webpack.js} [optional] [built]
    + 281 hidden modules
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  536 KiB       1
    Entrypoint undefined = index.html
    [../node_modules/html-webpack-plugin/lib/loader.js!./index.ejs] ./node_modules/html-webpack-plugin/lib/loader.js!./app/index.ejs 2.18 KiB {1} [built]
    [../node_modules/lodash/lodash.js] ./node_modules/lodash/lodash.js 527 KiB {1} [built]
    [../node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {1} [built]
    [../node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {1} [built]
ℹ ｢wdm｣: Compiled successfully.

Answer 1

I had the same error but updating karma-webpack fixed that.

Now It's working, in some places not work well with some test or libraries but is integrated with webpack and I'm seeing the tests and all that stuff somethings I need to re run the script because karma does not get attached sometimes my karma config:

let merge = require("webpack-merge");
let baseConfig = require("webpack.config.js");

// let path = require("path");
let webpack = require("webpack");
// const base = baseConfig();
let webpackConfig = merge(baseConfig(), {
    mode: "development",

    plugins: [
        new webpack.DefinePlugin({
            "process.env": require("../../config/test.env.js"),
        }),
    ],
});

webpackConfig.entry = {
    app: ["src/components/record-audio-modal/RecordAudio.vue"],
};
//delete webpackConfig.entry;

// no need for app entry during tests
module.exports = function(config) {
    config.set({
        frameworks: ["mocha"],
        // browserDisconnectTimeout: 7000,
        files: ["../../node_modules/jquery/dist/jquery.js", "../**/*.spec.js"],
        // processKillTimeout: 7000,
        preprocessors: {
            "**/*.spec.js": ["webpack", "sourcemap"],
        },
        client: {
            mocha: {
       
                timeout: 7000,

            },
        },
        webpack: webpackConfig,

        reporters: ["spec"],

        browsers: ["Chrome"],
    });
};

I run the script with npm but this is the snippet

cross-env NODE_ENV=testing karma start test/karma/karma.conf.js

and my packages installed

...
        "karma": "^5.1.0",
        "karma-chrome-launcher": "^3.1.0",
        "karma-coverage": "^2.0.2",
        "karma-mocha": "^2.0.1",
        "karma-phantomjs-launcher": "^1.0.4",
        "karma-sinon-chai": "^2.0.2",
        "karma-sourcemap-loader": "^0.3.7",
        "karma-spec-reporter": "0.0.32",
        "karma-webpack": "^4.0.2",
        "mocha": "^8.0.1",

        "webpack": "^4.17.1",
        "webpack-auto-inject-version": "1.2.2",
        "webpack-bundle-analyzer": "3.3.2",
        "webpack-cli": "3.1.0",
        "webpack-config-utils": "2.3.0",
        "webpack-dev-server": "3.1.11",
        "webpack-merge": "4.1.4",
        "webpack-merge-and-include-globally": "2.1.14"
...

let me know if you need another info