Module not found: Error: Can't resolve './spritemap.svg' in src

[BleddP]

Description Hi there,

I am in the process of upgrading a boilerplate my agency uses from Node 12 to Node 16 and to Webpack 5. I have also upgraded to the latest version of svg-spritemap-webpack-plugin, and the spritemap is generated in the /dist folder as it should, however in development mode its now also looking for the spritemap in the /src folder which it didn't do before.

Expected behavior We have a /src folder for development which also contains an assets folder for svg icons. When running npm run dev it looks at the files and assets in this folder. Previously, when using an SVG like so it would have no issues rendering the svg icon in our local development environment:

  <svg class="icon icon--linkedin-mono" width="50" height="50">
        <use xlink:href="spritemap.svg#linkedin-mono"></use>
    </svg>

Actual behavior Since upgrading, it seems that now it's also looking for a spritemap.svg in the /src folder, which isn't there because the spritemap is only generated on npm run build for the /dist folder. I'm a little bit confused why it previously would render the icons just fine in the local dev environment, but since upgrading its also looking for a spritemap in the /src folder, not just the /dist folder.

When I run npm run build it does generate a spritemap in the dist folder so that seems to work fine, just wondering why the local development environment is now giving us issues.

System information In our webpack.dev.js:

       new SVGSpritemapPlugin('src/assets/icons/*.svg', {
            output: {
                svgo: false,
                svg4everybody: true,
            },
        }),

Error:

  Module not found: Error: Can't resolve './spritemap.svg' in '/Users/bp/FS-sites/foursites-boilerplate/src  '
  ModuleNotFoundError: Module not found: Error: Can't resolve './spritemap.svg' in '/Users/bp/FS-sites/four  sites-boilerplate/src'

node: 16.7.0 npm: 7.20.3 webpack: 5.65.0 svg-spritemap-webpack-plugin: 4.4.0

[cascornelissen]

Hmm, nothing out of the ordinary as far as I can see from what you've included. I also don't think this would be related to any of the breaking changes in this plugin so my first guess is that it would be unrelated to this project, especially since I would've expected this to pop up earlier if that was not the case.

It would help immensely if you can provide a minimal reproduction repository so that I can look around/debug a bit, is that a possibility for you?

[BleddP]

Yes I was also looking at other config options. I've noticed that it starts giving me the error when I add the html-loader.

 {
        test: /\.(html)$/i,
        use: [
          {
            loader: "html-loader",
            options: {
              sources: true,
              esModule: true,
              minimize: false,
            },
          },
        ],
      },

However when I set sources to 'false' the error disappears. So it might have something to do with the loaders, I'll create a reproduction repo this weekend

[cascornelissen]

That sounds exactly like it's the problem as that forces the SVG to be imported as described in the html-loader docs. You'd either want to disable it or use the advanced options like urlFilter to specifically not use this feature for the spritemap.

[BleddP]

It turned out to be a combination of the html-loader which sets sources to 'true' by default and how in webpack 5 the file-loader has been replaced by the asset modules i.e. asset/resource. Nothing to do with your plugin! Apologies for the trouble and thanks for the quick replies :)

[cascornelissen]

No problem at all and glad to hear you managed to solve it. Also, thanks for reporting back!