Error with loading styles, webpack + swagger-ui

Question

I'm getting an error when trying to run quite simple app that uses swagger-ui-react component. Something breaks when loaders try to load styles from swagger-ui-react/swagger-ui.css.

Here's my setup (you can find a repo which reporoduces issue here):

Index.tsx:

import ReactDOM from "react-dom/client";
import SwaggerUI from "swagger-ui-react";
import "swagger-ui-react/swagger-ui.css";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

root.render(<SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />);

webpack.config.js:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: "eval-cheap-module-source-map",
  entry: path.resolve(__dirname, "./src/index"),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: { loader: "ts-loader" },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    modules: ["./node_modules"],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "public", "index.html"),
    }),
  ],
};

package.json:

{
  "name": "webpack-swagger-ui",
  "version": "1.0.0",
  "main": "index.tsx",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@types/react": "^18.0.33",
    "@types/react-dom": "^18.0.11",
    "@types/swagger-ui-react": "^4.18.0",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "postcss-loader": "^7.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "style-loader": "^3.3.2",
    "swagger-ui-react": "^4.18.2",
    "ts-loader": "^9.4.2",
    "typescript": "^5.0.3",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

When I do yarn start I'm getting an error:

ERROR in ./node_modules/swagger-ui-react/swagger-ui.css (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/swagger-ui-react/swagger-ui.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an object with empty or null values.

Can anyone point me where to look for a solution?

Answer 1

I've figured it out!

Turned out I need to install and use postcss-url plugin in order overcome this issue. This change in config fixes it:

{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: ['postcss-url']
    }
  }
}