Problem resolving path to svg

[NickWoodward]

Current behaviour 💣

Webpack is emitting my spritesheet, having been loaded by svg-sprite-loader and then extracted, but it cannot be resolved. This has happened since upgrading, both webpack from 4 to 5, and html-webpack-plugin to the latest version.

An answer to a stackoverflow question suggested that it's related to how it tries to resolve xlink:href="svg/spritesheet.svg#logo" in the html. Specifically <svg><use xlink:href="svg/spritesheet.svg#logo"></svg>

I think it's trying to resolve it from the filesystem before it actually exists

I still don't understand why html-webpack-plugin tries to resolve the path, though. It's probably treating the path as an entry and likely it was a breaking change in their 5.0 which you can work around somehow

SO question

The spritesheet is emitted, but I get the error:

Error: Child compilation failed:
  Module not found: Error: Can't resolve './svg/spritesheet.svg'

Expected behaviour ☀️

For html-webpack-plugin to treat the asset as it did in older versions

Reproduction Example 👾

Repo
Will leave the problem on the master branch

webpack.config.js from repo:

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");


module.exports = {
    entry: {index: "./src/index.ts"},
    mode: "development",
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist'),
          },
        port: 3000,
        open: {
            app: {
              name: 'chrome',
            },
          },
        hot: true,
        compress: true,
        historyApiFallback: true,
        watchFiles: ["src/**/*"]
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                include: path.resolve(__dirname, "src"),
                use: ["style-loader", "css-loader", "postcss-loader"]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.svg$/,
                use: [
                    {
                        loader: 'svg-sprite-loader',
                        options: {
                            extract: true,
                            spriteFilename: 'svg/spritesheet.svg'
                        },
                    },
                    'svgo-loader',
                ]
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
        ],
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks: ['index'],
            // publicPath: true
        }),
        new SpriteLoaderPlugin()
    ]
}

Asset in html:
<svg class="mx-auto my-16"><use xlink:href="svg/spritesheet.svg#logo"></svg>
Asset import in index.ts:
import './images/logo.svg';

Environment 🖥

Node.js v16.14.0
win32 10.0.19044

npm 8.10.0

npm ls webpack:
webpacktypescripttailwind@1.0.0 C:\Users\Nick\Tutorials\Tailwind\Projects\clipboard-website
├─┬ css-loader@6.7.1
│ └── webpack@5.74.0 deduped
├─┬ html-loader@4.1.0
│ └── webpack@5.74.0 deduped
├─┬ html-webpack-plugin@5.5.0
│ └── webpack@5.74.0 deduped
├─┬ postcss-loader@7.0.1
│ └── webpack@5.74.0 deduped
├─┬ style-loader@3.3.1
│ └── webpack@5.74.0 deduped
├─┬ ts-loader@9.3.1
│ └── webpack@5.74.0 deduped
├─┬ webpack-cli@4.10.0
│ ├─┬ @webpack-cli/configtest@1.2.0
│ │ └── webpack@5.74.0 deduped
│ └── webpack@5.74.0 deduped
├─┬ webpack-dev-server@4.10.0
│ ├─┬ webpack-dev-middleware@5.3.3
│ │ └── webpack@5.74.0 deduped
│ └── webpack@5.74.0 deduped
└─┬ webpack@5.74.0
  └─┬ terser-webpack-plugin@5.3.5
    └── webpack@5.74.0 deduped

npm ls html-webpack-plugin
webpacktypescripttailwind@1.0.0 C:\Users\Nick\Tutorials\Tailwind\Projects\clipboard-website
└── html-webpack-plugin@5.5.0

---

Juho in that SO question suggested using his plugin as a fix, which I'm grateful for, and it does work, but I'm more familiar with yours, and I thought this might be of interest? For the time being I'll probably use his or lazy load the svgs in image tags as he suggests.

Apologies for the wall of text!