karma-webpack 5 fails to read files with a query parameter (e.g. font-awesome) about karma-webpack HOT 6 CLOSED

Thanks for opening an issue, I'll try and take a look at this sometime this weekend

from karma-webpack.

It looks like in webpack 5 file-loader is deprecated, if you change your file-loader rule to something like this for your tests

            {
                test: /\.(jpg|png|gif|svg|woff|woff2|eot|ttf)$/,
                type: 'asset/inline',
            },

Does that solve this issue for you?

from karma-webpack.

uff. found a workaround. remove the default [query] for assets eg by

output.assetModuleFilename = '[name][ext]',

or setting generator.filename for individual assets in the module.rules

from karma-webpack.

A temporary workaround for me is to modify plugin.js to remove anything including and after a question mark:

this.controller.bundlesContent[webpackFileObj.name] = fs.readFileSync(
  filePath.replace(/\?.*/, ""),
  'utf-8'
);

from karma-webpack.

I have unfortunately proven that files can be named in this way so introducing the proposed change would be breaking for users in that situation 😞

I think this is potentially an outside issue related to file-loader I'm actually encountering the same issue as you in another project.

It seems that this file is picked up from this line in the font-awesome project

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');

It seems to me that as it is pulled in from a url, it should parse the file name as foo/fonts/fontawesome-webfont.eot without the query param. It looks like it is incorrectly loaded into webpack this way under asset.info

  info: {
    sourceFilename: '../node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0',
    immutable: true,
    contenthash: '4a2487b5cc6987c4f1de',
    size: 82
  },

from karma-webpack.

Hey @codymikol thanks for looking into this. I've switched my project from Karma over to Jest, so this issue is no longer relevant for me.

Nonetheless, if you look at my minimal example above, there is no file-loader being used. And I had converted everything in my project to use various asset loading strategies before I observed this issue.

from karma-webpack.