jantimon / jantimon/html-webpack-plugin
Problem resolving path to svg
- 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