Images contain module.exports instead of actual image content

[keobrien]

• Operating System: Mac
• Node Version: 14.17.0
• NPM Version: 5.6.0
• webpack Version: 5.47.0
• css-loader Version: 5.2.0

Expected Behavior

When using css-loader in combination with sass-loader, postcss-loader, and file-loader, images referenced in .scss files should be copied to the destination folder and loaded.

Actual Behavior

One correct version of the image is exported, and one version is exported with the hash as the name and this as the file contents:

module.exports = __webpack_public_path__ + "icon-arrow-right.svg";

The exported css code references the image with the broken contense.

Code

relevant package.json

  "devDependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-env": "^7.14.8",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "6.2.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^2.1.0",
    "nodelist-foreach-polyfill": "^1.2.0",
    "postcss-loader": "^6.1.1",
    "sass": "^1.36.0",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^5.47.0",
    "webpack-cli": "^4.7.2",
    "webpack-notifier": "^1.13.0",
    "yargs": "^17.0.1"
  },

relevant webpack.config.js

module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        },
        {
            test: /\.(svg|png|jpg|gif)$/,
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].[ext]",
                        esModule: false,
                        context: __dirname + "/static/"
                    },
                },
            ],
        }
    ]
}

button {
    background: url("../icons/icon-arrow-right.svg") no-repeat center center;
}

How Do We Reproduce?

The repo with the bug is private but the dependencies and webpack config above should recreate the issue.

Workaround

Doing nothing else except downgrading to css-loader 5.2.0 fixed the issue for me.

[alexander-akait]

file-loader is deprecated, please don't use it and migrate on https://webpack.js.org/guides/asset-modules/, please read changelog