jantimon / jantimon/html-webpack-plugin

Problem resolving path to svg

Open
#1,760 1 comment 0 reactions 0 assignees View on GitHub
wontfix
Dominant language
JavaScript
Stars
10.7k
Forks
1.3k
Avg merge
1m
Merged PRs (30d)
1

Description

## 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 ``

>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](https://stackoverflow.com/questions/73439008/webpack-module-not-found-even-though-file-is-emitted)

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](https://github.com/NickWoodward/clipboard-website)
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:
``
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!

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the failure using the linked clipboard-website repository and its webpack.config.js, especially the HtmlWebpackPlugin and SpriteLoaderPlugin configuration. Start with src/index.html and the SVG import in src/index.ts, then verify that the build no longer reports the missing svg/spritesheet.svg module while still emitting and referencing the sprite asset.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript, webpack
Domain
build-system
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.