svg-spritemap-webpack-plugin: Cannot read property 'spritemap': after update to v4.0

Thanks again for the additional information, I’m pretty sure the fix in 7da9664 should resolve the path issue you’re running into.

The division symbol deprecation warning should be gone with the changes in 6296251. It’s a little more complicated than simply upgrading the generated sass file, other processors such as libsass don’t implement math.div ye. Luckily the chunking logic that was there for performance reasons back in the day could be removed.

In the future, creating a separate issue for something totally unrelated is usually the way to go to keep discussions on track ✌🏼

If you could test both of these by installing directly from GitHub, that’d be great! ❤️

npm install cascornelissen/svg-spritemap-webpack-plugin#master

yes i understood! I reduce to the minimal config => https://github.com/Diono/test without any options, i still have the problem

That’s the thing, it should still do that:

https://github.com/cascornelissen/svg-spritemap-webpack-plugin/blob/31e7ace01bd682c537438923c7876f703ea878e5/lib/index.js#L284-L292

I was trying to debug why it’s not working in your project but there’s so many irrelevant things going on in that repository that I can’t figure it out easily. While I do enjoy fixing bugs, I don’t enjoy spending hours trying to understand some more complicated codebase as much 😅 Which is why I asked for a minimal repository.

You can also debug it yourself, you might get further because you know your codebase. You can just add console.log()s in node_modules/svg-spritemap-webpack-plugin/ (main entry is lib/index.js) to try and see what’s going wrong.

@xavierfoucrier, I’ve just published 4.0.1 with these fixes.

@Diono, thanks, I was hoping for a bit of a smaller repository, it’s kind of hard figuring out what’s happening when there’s tens of additional plugins being loaded, there’s CSS files getting generated containing JS, but I took a quick look…

• I don’t think it’s related to #139, that issue is about [contenthash] not getting replaced correctly in the styles file but that does seem to be working correctly right now.

• I can not reproduce what you’re explaining in https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/163#issuecomment-839611577. I checked out the repository, ran npm install and npm run dev and it’s compiling without errors. You might want to try an rm -rf node_modules/ && npm install?

• I can reproduce what you’re explaining in https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/163#issuecomment-839607662. This is caused by the fact that you’re using output.path, output.publicPath, and then also specify sassOptions.outFile which is a combination I’ve never seen before. Then there’s also some additional url function that catches stuff for css-loader which I don’t understand.

  You’re basically moving files/paths around and this plugin can’t keep track of it anymore, it tries to deduce the correct path from output.publicPath which is why it’s using /dist/ for the prefix but combining that with output.path and sassOptions.outFile breaks it.

  Then again, I’m getting a bunch of errors like the one below because CSS is being interpreted as JS for some reason so I can’t really debug it.

  ERROR in ac759dddd5adccf40128.css
  ac759dddd5adccf40128.css from Css Minimizer
  /home/cas/projects/test/ac759dddd5adccf40128.css:1:1: Unknown word [ac759dddd5adccf40128.css:1,1]
      at Input.error (/home/cas/projects/test/node_modules/postcss/lib/input.js:123:16)
      at Parser.unknownWord (/home/cas/projects/test/node_modules/postcss/lib/parser.js:518:22)
      at Parser.other (/home/cas/projects/test/node_modules/postcss/lib/parser.js:149:12)
      at Parser.parse (/home/cas/projects/test/node_modules/postcss/lib/parser.js:59:16)
      at parse (/home/cas/projects/test/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/cas/projects/test/node_modules/postcss/lib/lazy-result.js:122:16)
      at Processor.process (/home/cas/projects/test/node_modules/postcss/lib/processor.js:33:12)
      at cssnanoMinify (eval at transform (/home/cas/projects/test/node_modules/css-minimizer-webpack-plugin/dist/minify.js:34:28), <anonymous>:51:61)
      at minify (/home/cas/projects/test/node_modules/css-minimizer-webpack-plugin/dist/minify.js:15:32)
      at Object.transform (/home/cas/projects/test/node_modules/css-minimizer-webpack-plugin/dist/minify.js:35:24)
  

If you can provide a minimal repository that explains this issue I can take another look.

Hi @cascornelissen,

Yes I can confirm it works fine 👍 Can you publish a new release today?

Thanks a lot!

@cascornelissen I will tomorrow! Thanks 💪

@xavierfoucrier, thanks for the repository, that helped a lot. It’s indeed a problem that only pops up in watch mode. It should be fixed in ece1ea4.

These fixes should also resolve the issue with the SVGO plugins not getting applied, using your example repository with floatPrecision: 2, r="35.278888888888" is getting converted to r="35.28".

@Diono, with regards to:

• Your first comment, https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/163#issuecomment-838685163, please check https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/163#issuecomment-838124682, this fix and others referenced in this thread are not yet on npm.
• Your second comment, https://github.com/cascornelissen/svg-spritemap-webpack-plugin/issues/163#issuecomment-838830714, that should be fixed in e58b1d8.

Can both of you try out these changes and report back?

npm install cascornelissen/svg-spritemap-webpack-plugin#master

@cascornelissen I have just sent you an invite on a private sandbox repository!

• clone repo
• npm i
• npm run dev

Looks like the NPM serve option for webpack-dev-server is the problem. Until now, it was working fine with v3.

Thanks for the feedback 😉

@cascornelissen Yes I saw that the configuration changed, I will upgrade it and let you know. By the way, using only SVGSpritemapPlugin() doesn’t work too.

I will investigate and drop a minimal reproductible test repository if needed 😉