Webpack "Invalid configuration object" when using type: "asset/resource"

Question

I am new to webpack, and am trying to use images for the first time, following this tutorial. My ultimate goal is to be able to refer to an image in CSS, something like this: background-image: url("assets/bg.png");

Here is my config.

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "."),
    filename: "public/main.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        // This part does not work:
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },
};

It works without the rule for images, but with it I get the following error when building:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.module.rules[2].type should be one of these: "javascript/auto" | "javascript/dynamic" | "javascript/esm" | "json" | "webassembly/experimental" -> Module type to use for the module

I'm not sure what I'm doing wrong and would really appreciate some tips.

(I'm using Webpack 5.74.0)

Answer 1

Considering type: "asset/resource" is a valid option for Webpack 5, double-check you are indeed using Webpack 5.74.0 as intended. Run npm list webpack or yarn list webpack to verify the installed version. If you have a mismatch or multiple versions, that could be the source of the issue.

If the problem still persists, consider creating a minimal reproducible example, which could be the basis to a buh report, as a Webpack GitHub issue.

You could also consider using file-loader as a fallback approach for handling images in older Webpack versions or configurations, though this should not be necessary with Webpack 5 and its asset modules feature.

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./js/main.js",
  output: {
    path: path.resolve(__dirname, "public"), // Make sure output directory is correctly set
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource", // That should work as is in Webpack 5
      },
    ],
  },
};