Please support webpack v5+

[jlchereau]

23 10 2020 10:13:24.267:ERROR [plugin]: Error during loading "C:\<project>\node_modules/karma-webpack" plugin:
  Cannot find module 'webpack/lib/node/NodeOutputFileSystem'
Require stack:
- C:\<project>\node_modules\webpack-dev-middleware\lib\fs.js
- C:\<project>\node_modules\webpack-dev-middleware\index.js
- C:\<project>\node_modules\karma-webpack\dist\karma-webpack.js
- C:\<project>\node_modules\karma-webpack\dist\index.js
- C:\<project>\node_modules\karma\lib\plugin.js
- C:\<project>\node_modules\karma\lib\server.js
- C:\<project>\node_modules\karma\lib\cli.js
- C:\<project>\node_modules\karma\bin\karma

[appzuka]

I have karma-webpack working with webpack v5. I have posted a small repository at:

https://github.com/appzuka/karma-webpackv5-test

I needed to create a patch to get it working with ts files.

[jdelStrother]

FWIW I had success with using the dev release of karma-webpack, adding "webpack" to the list of karma frameworks, and ensuring the webpack config I was providing to karma didn't have an output field:

diff --git a/webpack/karma.conf.js b/webpack/karma.conf.js
index 62e1808fb0..2961f252b5 100644
--- a/webpack/karma.conf.js
+++ b/webpack/karma.conf.js
@@ -2,8 +2,8 @@
 // Karma configuration
 // Generated on Thu Apr 02 2015 11:41:22 GMT+0100 (BST)

-var webpackConfig = require("./webpack.config.base.js");
+let webpackConfig = require("./webpack.config.base.js");
+delete webpackConfig.output;

 module.exports = function (config) {
   config.set({
@@ -12,7 +12,7 @@
     webpack: webpackConfig,

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

     // list of files / patterns to load in the browser
     files: [
diff --git a/webpack/package.json b/webpack/package.json
index 21fb8591e5..4eee3b9e97 100644
--- a/webpack/package.json
+++ b/webpack/package.json
@@ -146,7 +146,7 @@
     "karma": "^5.2.3",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^4.0.1",
-    "karma-webpack": "^4.0.2",
+    "karma-webpack": "dev",
     "node-sass": "^4.14.1",
     "postcss-loader": "^3.0.0",
     "postcss-simple-vars": "^5.0.2",

[jlchereau]

Both @appzuka's and @jdelStrother suggestions result in the same output for me (no issue with both webpack@4.44.2 and karma-webpack@4.0.2):

04 11 2020 09:43:02.279:ERROR [karma-server]: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Hash.update (internal/crypto/hash.js:84:11)
    at Object.sha1 (C:\<project>\node_modules\karma\lib\utils\crypto-utils.js:9:8)
    at runProcessors (C:\<project>\node_modules\karma\lib\preprocessor.js:70:26)
    at async FileList.preprocess [as _preprocess] (C:\<project>\node_modules\karma\lib\preprocessor.js:134:5)
    at async Promise.all (index 0)
    at async C:\<project>\node_modules\karma\lib\file-list.js:90:11
    at async Promise.all (index 13) {
  code: 'ERR_INVALID_ARG_TYPE'
}

[jdelStrother]

Hm, for me that was caused by passing webpack config looking like { output: { filename: "[name].[contenthash].js" } }, and was fixed just by removing the output field.

[jlchereau]

I do not have an output field. This is my webpack configuration within karma.conf.js:

webpack: {
    context: path.join(__dirname, '/'),
    devtool: 'inline-source-map',
    externals: {
        jquery: 'jQuery',
    },
    mode:
        process.env.NODE_ENV === 'production'
            ? 'production'
            : 'development',
    module: {
        rules: [
            {
                // Process es6 files with Babel
                test: /\.es6$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: { babelrc: true },
                    },
                ],
            },
            {
                // Prevent any kendo.* from loading (we have already added kendo.all.min.js)
                test: /kendo\.\w+\.js$/,
                use: 'null-loader',
            },
            {
                // Append  module.exports = JSC; to jscheck.js
                // @see https://webpack.js.org/loaders/exports-loader/
                test: require.resolve(
                    path.join(__dirname, '/test/vendor/jscheck.js')
                ),
                loader: 'exports-loader',
                options: {
                    type: 'commonjs',
                    exports: 'single JSC',
                },
            },
            {
                // Prepend var jQuery = require("jquery"); to jquery.simulate.js.
                // @see https://webpack.js.org/loaders/imports-loader/#usage
                test: require.resolve(
                    path.join(
                        __dirname,
                        '/test/vendor/jquery.simulate.js'
                    )
                ),
                use: [
                    {
                        loader: 'imports-loader',
                        options: { imports: ['default jquery $'] },
                    },
                ],
            },
            {
                // Assign this=window and prevent AMD + CJS loading
                // @see https://github.com/jakerella/jquery-mockjax/issues/285#issuecomment-342411363
                // @see https://webpack.js.org/loaders/imports-loader/#disable-amd
                // @see https://webpack.js.org/guides/shimming/
                test: require.resolve(
                    path.join(
                        __dirname,
                        '/test/vendor/jquery.mockjax.js'
                    )
                ),
                use: [
                    {
                        loader: 'imports-loader',
                        options: {
                            // define: '>false',
                            exports: '>false',
                            this: '>window',
                        },
                    },
                ],
            },
            /* ,
            {
                // import sinonChai from 'sinon-chai' does not work
                // @see https://github.com/domenic/sinon-chai/issues/85
                // @see https://webpack.js.org/loaders/imports-loader/#disable-amd
                test: require.resolve('sinon-chai'),
                use: [
                    {
                        loader: 'imports-loader',
                        options: { require: '>function(){}' }
                    }
                ]
            }
            */
        ],
    },
    resolve: {
        extensions: ['.es6', '.js'],
        modules: [
            path.resolve(__dirname, 'src/js/vendor/kendo'), // required since Kendo UI 2016.1.112
            path.resolve(__dirname, 'src/js/vendor/modernizr'),
            path.resolve(__dirname, 'test/vendor'),
            'node_modules',
        ],
    },
    stats: 'verbose',
},

[appzuka]

From the config above I can see that you are using files with the extension 'es6'. The current next branch assumes that all source files have a 'js' extension. If they do not it will fail with the error you are seeing. I am using 'ts' and 'tsx' file and my PR addresses this, but it will still fail with other extensions. My PR could be extended to work with es6 extensions or perhaps made to cope with non js extensions in general.

If you are able to change your extension to js that would be a quick fix.

[jlchereau]

@appzuka, thank you. It makes sense although I am not sure why karma-webpack@5 would need to be aware of the file extension before processing through webpack@5 (especially since such configuration works with webpack@4 and karma-webpack@4). In my configuration, es6 files are processed with Babel whereas js files are not. I could easily switch to another extension like mjs, but if I rename all es6 files to js, I need to find another way to distinguish files processed with Babel.

[appzuka]

The line which allows my PR to work with ts and tsx files is:

https://github.com/ryanclark/karma-webpack/blob/93e78a19b1d4ef069eef8f77ab20a0ae91605edf/lib/karma-webpack.js#L86

You could extend this to allow es6 files.

[ryanclark]

Hey all,

I'd just like to apologise for not being able to give this project the love & attention it needs. I'll get to this as soon as I can, I've carved out time at the weekend for it. Work has been hectic and it's taken all of my attention over the last few months.

Sorry all, I realise this is a blocker for some and I should've done it sooner. Thanks for your patience also.

[jasonwilliams]

@ryanclark have you thought about adding maintainers? It sounds like there's some in this thread who can help

[ryanclark]

I did tweet asking for maintainers and am happy to add more. Shoot me an email to ryan@ryanclark.me if anyone is interested.

A release will be out mid week for webpack v5 support

[ryanclark]

Welcoming @AprilArcus who has kindly offered to help contribute! & I'm still working on this new release 🙂

[ceisele-r]

When using the karma-webpack v5.0.0-alpha.3.0, I am also receiving the following error similar to the one mentioned before by @jlchereau . Just as an info, maybe it helps.

Webpack bundling...
37 assets
webpack 5.9.0 compiled successfully in 11929 ms
30 11 2020 16:32:28.765:ERROR [karma-server]: Error during file loading or preprocessing
TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Hash.update (internal/crypto/hash.js:82:11)
    at Object.sha1 (C:\app\node_modules\karma\lib\utils\crypto-utils.js:9:8)
    at runProcessors (C:\app\node_modules\karma\lib\preprocessor.js:70:26)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async FileList.preprocess [as _preprocess] (C:\app\node_modules\karma\lib\preprocessor.js:134:5)
    at async Promise.all (index 0)
    at async C:\app\node_modules\karma\lib\file-list.js:90:11
    at async Promise.all (index 5)
30 11 2020 16:32:28.774:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
30 11 2020 16:32:28.775:INFO [launcher]: Launching browsers chrome with concurrency unlimited
30 11 2020 16:32:28.779:INFO [launcher]: Starting browser ChromeHeadless
30 11 2020 16:32:28.809:ERROR [karma-server]: UnhandledRejection: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
30 11 2020 16:32:28.811:ERROR [karma-server]: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined
    at Hash.update (internal/crypto/hash.js:82:11)
    at Object.sha1 (C:\app\node_modules\karma\lib\utils\crypto-utils.js:9:8)
    at runProcessors (C:\app\node_modules\karma\lib\preprocessor.js:70:26)
    at async FileList.preprocess [as _preprocess] (C:\app\node_modules\karma\lib\preprocessor.js:134:5)
    at async Promise.all (index 0)
    at async C:\app\node_modules\karma\lib\file-list.js:90:11
    at async Promise.all (index 5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

There is no output field set in the webpack config in my case. I even don't know what the affected data argument refers to.

[appzuka]

@ceisele-r, What sort of files do you have in your project? If you have files with any extension other than js (such as ts, tsx, es6, ...) you will see this error. I submitted a PR to make it work with ts and tsx files:

https://github.com/ryanclark/karma-webpack/blob/93e78a19b1d4ef069eef8f77ab20a0ae91605edf/lib/karma-webpack.js#L86

[ceisele-r]

@appzuka well, it's a typescript project, so it has .js, .ts, .tsx files.
But the webpack config in the karma config looks like this:

webpack: {
      mode: "development",
      // Enable sourcemaps for debugging webpack"s output.
      //devtool: "source-map",
      watch: false,

      resolve: {
        // Add ".ts" and ".tsx" as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".json"],
      },

      module: {
        rules: [
          {
            test: /\.tsx?$/,
            use: {
              loader: "babel-loader",
              options: {
                presets: [
                  [
                    "@babel/preset-env",
                    {
                      // Explicitly include core-js as its not loaded globally in karma tests
                      "useBuiltIns": "usage",
                      "corejs": "3.6",
                      "debug": false,
                      "targets": {
                        "chrome": "58",
                        "ie": "11",
                      },
                    },
                  ],
                  [
                    "@babel/preset-typescript",
                  ],
                  "@babel/preset-react",
                ],
                plugins: [
                  "@babel/plugin-transform-modules-commonjs",
                  "@babel/proposal-object-rest-spread",
                  "@babel/plugin-transform-arrow-functions",
                  "transform-react-remove-prop-types",
                  ["@babel/plugin-proposal-decorators", { "legacy": true }],
                  ["@babel/proposal-class-properties", { "loose": true }],
                  "lodash",
                ],
                cacheDirectory: false,
              },
            },
          },
        ],
      },

      // When importing a module whose path matches one of the following, just
      // assume a corresponding global variable exists and use that instead.
      // This is important because it allows us to avoid bundling all of our
      // dependencies, which allows browsers to cache those libraries between builds.
      externals: {},
    },

...so babel should transpile it to .js.

But, does the line you refer to get called before webpack (and therefore babel) process the files? So does it affect the "raw" project files?

[appzuka]

@ceisele-r, The current 'next' version will not work with TypeScript files. The problem is that karma-webpack caches the files but it assumes they end in '.js' to create a cache key. My PR addresses this but only for ts and tsx files. You could try adding my PR to your project (https://github.com/appzuka/karma-webpack/tree/next). I am able to run karma-webpack with webpack v5 using this PR.

The maintainers are working on this repo so hopefully this PR will be merged soon, and perhaps extended to cover other file types.

[ceisele-r]

@appzuka thanks. With your repo pulled in for karma-webpack, it works that at least there is no error during run.
But unfortunately, no tests are executed even though they are there. So it does not seem to find the .ts tests.
An example test name is viewer.karma.ts.

Webpack bundling...
assets by status 27.2 KiB [emitted] 35 assets
assets by status 7.69 MiB [compared for emit]
  asset commons.js 7.68 MiB [compared for emit] (name: commons) (id hint: commons)
  asset runtime.js 7.79 KiB [compared for emit] (name: runtime)
webpack 5.9.0 compiled successfully in 11904 ms
30 11 2020 17:20:42.805:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
30 11 2020 17:20:42.808:INFO [launcher]: Launching browsers chrome with concurrency unlimited
30 11 2020 17:20:42.812:INFO [launcher]: Starting browser ChromeHeadless
30 11 2020 17:20:43.438:INFO [Chrome Headless 86.0.4240.198 (Windows 10)]: Connected on socket 8ZHjkKCcvbgcdx2BAAAA with id 47238439
Chrome Headless 86.0.4240.198 (Windows 10): Executed 0 of 0 SUCCESS (0.004 secs / 0 secs)
TOTAL: 0 SUCCESS
npm ERR! code ELIFECYCLE
npm ERR! errno 1

That's the karma config regarding files:

    browserNoActivityTimeout: 100000,
    basePath: "",
    frameworks: ["mocha", "chai"],
    files: [
      { pattern: "./src/**/*.karma.ts", included: true },
    ],

    client: {
      mocha: {
        reporter: "html",
      },
    },
    exclude: [],
    preprocessors: {
      "./src/**/*.karma.ts": ["webpack"],
    },
   ...

[appzuka]

@ceisele-r, In the 'next' branch you need to add 'webpack' to your list of frameworks. See:

https://github.com/ryanclark/karma-webpack/tree/next

So you will need:

frameworks: ["mocha", "chai", "webpack"],

[ceisele-r]

@appzuka wonderful, thanks! Now it seems to work.
Thank you very much for your help!

[appzuka]

@ceisele-r, I spent a few hours stuck on these issues myself so I'm glad I could share what I learned.

Good luck with your project.

[ryanclark]

Just an update on where I'm at - it's been so long ago that I was contributing to this project that wrapping my head around it properly to put out a "proper" release with webpack v5 support that isn't hacky is proving difficult. So instead, I've been working on from pretty much a fresh plate to ensure that it's a good quality release.

What's peoples thoughts on this? I understand there are some temporary solutions we can put in place to get v5 support out there ASAP - I'm happy to do this alongside what I'm working on too.

My main priority is ensuring that everyone is happy and that we have a solid contributor base that isn't just me, so please let me know your thoughts and what I can do.

Cheers!

[jasonwilliams]

@ryanclark for us this package is the last remaining blocker on updating to Webpack 5. So a higher priority for me would be adding support first before a clean rebuild.

Webpack won’t push another major version (6) for at least a year or 2, so once you have support out the door you should have plenty of time to do a refactor.

[ryanclark]

@jasonwilliams sounds good - I'll use a combination of the solutions people have posted here to get a release through.

The reason I was going for a rewrite is because I started by upgrading all the node modules, and the API of webpack-dev-middleware has changed in the next major version, so I was trying to wrap my head around the usage of it in this plugin - that can wait though.

Thanks for your feedback 🙂

[appzuka]

@ryanclark, I am using the next branch with Webpack5 so it seems that it is close to being ready, at least for relatively straightforward projects. I would be happy to help investigate any issues. In the release notes for the new version you should highlight the need to include webpack in the list of frameworks as this is easy to overlook.

[veke]

Hi,

v5.0.0-alpha.2 gives

Webpack starts watching...
(node:17268) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.

I'm using webpack-cli v4.2.0, wepack v5.9.0 and karma v5.2.3

[jasonwilliams]

@veke any reason why you're not using 5.0.0-alpha.3.0 ?

[veke]

@veke any reason why you're not using 5.0.0-alpha.3.0 ?

Ah, did not find that version from the releases. Well, it did not made difference.
Single run works but watch mode gives that warning.

[ceisele-r]

Hi @ryanclark , v5.0.0-alpha.5 works in my setup. Thanks!

[elad-lachmi]

@ryanclark I'm still getting this error TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined

Using webpack 5.10.0 and TypeScript. From your comment above I understand TS issues are also resolved in alpha.5, right?
I've followed all of the advise in this thread and still getting the same error.
Any ideas?

Thanks for all your effort. Much appreciated!

[jdelStrother]

@elad-lachmi May or may not be related, but that's the exact error I get if I just pass my base webpack config to Karma, without removing my output options. (#452 (comment))

[elad-lachmi]

I've followed all of the advise in this thread

I take that back. I've followed all of the advise in this thread, except what @jdelStrother suggested.
Thanks @jdelStrother !
So I have a working config with webpack 5.10.0 and v5.0.0-alpha.5

EDIT: so now I'm getting these kinds of errors. I believe it's related, because those tests and targets haven't been changed in a while.

TypeError: callback is not a function at flushFirstCallback (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:434495:28) at flushImmediateWork (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:434557:9) at unstable_runWithPriority (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:434649:5) at runWithPriority$1 (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:379023:10) at commitRoot (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:390732:3) at performSyncWorkOnRoot (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:390071:3) at scheduleUpdateOnFiber (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:389623:7) at updateContainer (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:393224:3) at legacyRenderSubtreeIntoContainer (/var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:393779:5) at /var/folders/3q/x1b20_c923n1wd3ky_wc8g7rfzm5c8/T/_karma_webpack_/commons.js:393889:7

EDIT 2: Debugging it a little bit. Seems something similar to #151. In my case callback is also a number.

EDIT 3: If anyone else hits this exception in flushFirstCallback, it's related to React and not specific to webpack or karma-webpack, and most likely an issue with an outdated scheduler package. I had to run yarn why scheduler to figure out which packages were pulling in an old version and upgrade them. So I guess all is working for me with the alpha.5 release as well. Thanks @ryanclark!

[v-anvodn]

Hello,

We are also seeing issue while upgrading to WebpackV5.

One issue is:
Error during loading node_modules/karma-webpack plugin:
Cannot find module webpack/lib/dependencies/SingleEntryDependency

-Raag

[ryanclark]

Thanks all for the feedback!

To those who are experiencing errors still, do you have a small example recreating the issue I can take a look at please? Thank you

[jlchereau]

As far as I am concerned (es6 files packaged through babel and webpack):

• All tests execute in weboack v4 + karma-webpack v4
• No test executes in webpack v5 + karma-webpack v5-alpha 5 (but no error)

[appzuka]

@jlchereau, have you included 'webpack' in the list of frameworks in karma.conf.js? This is new in V5 and if you miss it no tests will execute. See: #452 (comment).

My project (which uses TypeScript) works with karma-webpack@5.0.0-alpha.5 and webpack@5.10.0.

[jlchereau]

@appzuka, thank you. All good after adding webpack to the list of frameworks.

[jasonwilliams]

Considering how many people have tripped over this ^ is it worth putting something in the readme?

[jlchereau]

@jasonwilliams, agreed + section relative to upgrade instructions from v4 to v5

[appzuka]

A note in bold has been added to the readme:

8d7366f

I agree this needs to be very clear in the release notes otherwise a lot of people will miss it.

[jasonwilliams]

Weirdly i get this when upgrading karma-webpack to '5.0.0-alpha.5' and webpack to 5.10.3

$ /app/node_modules/.bin/karma start karma.conf.js
node:internal/util/inspect:1380
  throw err;
  ^

TypeError: Function has non-object prototype 'null' in instanceof check
    at Function.[Symbol.hasInstance] (<anonymous>)
    at getConstructorName (node:internal/util/inspect:545:13)
    at formatRaw (node:internal/util/inspect:813:23)
    at formatValue (node:internal/util/inspect:803:10)
    at formatProperty (node:internal/util/inspect:1689:11)
    at formatRaw (node:internal/util/inspect:1017:9)
    at formatValue (node:internal/util/inspect:803:10)
    at formatProperty (node:internal/util/inspect:1689:11)
    at formatRaw (node:internal/util/inspect:1017:9)
    at formatValue (node:internal/util/inspect:803:10)
    at formatProperty (node:internal/util/inspect:1689:11)
    at formatArray (node:internal/util/inspect:1519:17)
    at formatRaw (node:internal/util/inspect:1014:14)
    at formatValue (node:internal/util/inspect:803:10)
    at formatProperty (node:internal/util/inspect:1689:11)
    at formatRaw (node:internal/util/inspect:1017:9)
    at formatValue (node:internal/util/inspect:803:10)
    at formatProperty (node:internal/util/inspect:1689:11)
    at formatRaw (node:internal/util/inspect:1017:9)
    at formatValue (node:internal/util/inspect:803:10)
    at Object.inspect (node:internal/util/inspect:336:10)
    at new Server (/app/node_modules/karma/lib/server.js:66:41)
    at Object.exports.run (/app/node_modules/karma/lib/cli.js:258:7)
    at Object.<anonymous> (/app/node_modules/karma/bin/karma:3:23)
    at Module._compile (node:internal/modules/cjs/loader:1083:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
    at Module.load (node:internal/modules/cjs/loader:948:32)
    at Function.Module._load (node:internal/modules/cjs/loader:789:14)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12)
    at node:internal/main/run_main_module:17:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I don't get this on the older versions :(

It could be related to webpack/webpack#11767

[thw0rted]

I'm getting an error with alpha.5 and I don't know how to debug it:

ERROR in ./node_modules/@angular/material/__ivy_ngcc__/bundles/material-expansion.umd.js
Module build failed (from ./node_modules/string-replace-loader/index.js):
SyntaxError: Unexpected identifier
    at Object.processChunk (C:\Workspace\myProject\node_modules\string-replace-loader\lib\processChunk.js:7:24)
 @ ./src/app/material.module.ts 32:20-58
 @ ./src/app/shared/my-input/my-input.component.spec.ts 17:26-58

It's pointing to this code which seems fine, and works under Webpack v4 with the previous major version of karma-webpack. The Webpack config is using @ngtools/webpack to build (TS) Angular components, passed through string-replace-loader to make modifications to some dependencies on the fly. Regular builds work fine, but for some reason Karma tests through karma-webpack generate this error.

I'd like to troubleshoot it myself but have no idea how to debug whatever karma-webpack does under the hood.

[thw0rted]

Follow-up to yesterday's comment: this works if I touch the relevant source file after installing, which feels completely bonkers. I asked on SO and would appreciate it if anybody (@ryanclark maybe?) can offer any kind of guidance.

[codymikol]

A note in bold has been added to the readme:

8d7366f

I agree this needs to be very clear in the release notes otherwise a lot of people will miss it.

I have a branch for validating that this is the case and throwing a more specific error message.

#457

Just looking for some feedback on whether there might be edge cases where it is not required and if throwing an error is the most desirable way to stop execution.

[codymikol]

I also want to document here for anyone running into a similar issue that I was that if you have an entry point set up in your webpack configuration, it will cause your bundled files to not be included and you will get this error.

TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined

[thw0rted]

I was going to ask about that last bit -- I got up and running with karma-webpack using a howto article I found online, and one of the things it has you do is import your webpack config with require, then delete the entry point(s) before passing it to your Karma config, for this plugin to use. If the entry field always causes failure in a known way, why not just delete / ignore it?

[codymikol]

I was going to ask about that last bit -- I got up and running with karma-webpack using a howto article I found online, and one of the things it has you do is import your webpack config with require, then delete the entry point(s) before passing it to your Karma config, for this plugin to use. If the entry field always causes failure in a known way, why not just delete / ignore it?

A good point, I can add a PR that throws a warning and removes the entry point.

[jasonwilliams]

Hey @ryanclark or @codymikol is Webpack v5 support still in alpha?
If its working for the majority of users could a major version be put out for users to opt in to? At least anyone still having issues can remain on 4..

I don't know how ready this is though so just a suggestion.

[codymikol]

@jasonwilliams We are currently still in alpha, I'm hoping to get a stable release out in the next two weeks

[codymikol]

To limit confusion, I am combining all threads for webpack 5 / karma6 support over here ==> #475

[codymikol]

v5 is now available