Webpack 5 Compatibility

[sectsect]

Thanks for helpful package.

Currently this package does not work with webpack 5 beta. Do you have a plan to add compatibility before webpack 5 is officially released?

[cascornelissen]

I'm planning to look into support for Webpack 5 once the first RC, yes. I'll leave this issue open to track progress once a RC is available.

Others are of course free to investigate this before a RC is released.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[sectsect]

@cascornelissen

Hi. webpack 5 is now in RC.

"webpack": "^5.0.0-rc.3",

and the release planned for 2020-10-10. https://github.com/webpack/webpack/issues/11406

I can't wait for added webpack 5 compatibility to this package.

Thanks.

[cascornelissen]

I've noticed and have been playing around with it for a bit but it seems like the MultiEntryPlugin which is used by this plugin is no longer available in webpack 5 and I can't find any information about it so until there is some migration documentation I'm holding of from continuing on this for now.

[sectsect]

@cascornelissen

I got a useful tip. we can use webpack/lib/EntryPlugin multiple times instead of MultiEntryPlugin on webpack5.

https://twitter.com/wSokra/status/1311701299914776576?s=20

[cascornelissen]

PSA: I'm aware Webpack 5 was released earlier today and am still working on getting this plugin to work with both 4 and 5.

Progress is available on the webpack5 branch which currently has a setup to run the test suite against both Webpack 4 and 5 and contains some fixes to make parts work with 5.

---

Almost all tests are green again, and all of them are still green for Webpack 4. I'm still trying to figure out how to keep the dummy module (i.e. how to migrate Chunk.addModule()) from getting discarded using the new ChunkGraph/ModuleGraph API but that should only be a problem when using Webpack 5 with the output.chunk.keep option set to true.

---

An update for anyone interested: I'm hoping to spend some more time on finishing this up next weekend. In the meantime, feel free to try and figure out this (hopefully) last step described above.

---

Haven't been able to find a solution yet, asked on the Webpack Gitter, hopefully someone there knows.

---

Posted the same question on StackOverflow since no one seems to be able to answer it on Gitter. If you're, in the meantime, willing to test out what's available already it's possible to install directly from the GitHub branch using the following command. If you find issues please don't add them here but create new tickets for them instead.

$ npm install --save-dev cascornelissen/svg-spritemap-webpack-plugin#webpack5

---

Decided to post the same question on the Webpack GitHub repository, let's hope someone there knows 🤞🏼

[cascornelissen]

Alright, this took way too long for the simplicity of the required change that was blocking a release but thankfully the man, the myth, the legend, Tobias Koppers himself, stepped in when I create an issue on the GitHub repository. His comment pushed me in the right direction and we now have a new release on NPM under the next tag. Install it using the following command:

$ npm install svg-spritemap-webpack-plugin@next

Please test this release out using both Webpack 4 and 5 if possible and report any problems. If nothing pops up during the coming days I'll release it with the latest dist-tag.

[sectsect]

@cascornelissen

v3.6.0 create spritemap.js file. Do you have option to delete this file?

Related? #17

[cascornelissen]

@sectsect, thanks for reporting the issue, it should be deleted automatically (unless chunk.keep is set to true), there's even a test for it which seems to be green for both Webpack 4 and 5 so I'll investigate manually.

[markgaze]

The #webpack5 version fixed my issues but since switching to v3.6.0, I get this:

node_modules/svg-spritemap-webpack-plugin/svg4everybody-helper.js 30 bytes [built] [code generated]
node_modules/svg4everybody/dist/svg4everybody.js 6.03 KiB [built] [code generated]
spritemap-dummy-module 1 bytes [code generated]
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
ERROR in requestWithoutMatchResource.charCodeAt is not a function
webpack 5.3.0 compiled with 21 errors in 1522 ms

I've tried to change a few things to see if there was anything else causing it (as I've bumped a few other dependencies at the same time) but it seems like the update to v3.6.0 is the cause. Let me know if I can help you out with debugging this and I'll see what I can do.

[cascornelissen]

Interesting, could you (~and @sectsect as well~ #127, and anyone running into other issues with 3.6.x) create a new issue? I wasn't expecting multiple issues to pop up but that'll hopefully prevent some confusion.

For anyone creating issues: it helps a lot if you provide a minimal configuration that reproduces the issue, especially if I can just copy/paste that configuration into the simple example. Even better would be a failing unit test case.

I'm locking this issue for now to ensure new issues are created instead, if new versions are released I'll make sure to post it here as well.

[cascornelissen]

All bugs that were found so far have been fixed and released in 3.6.1.

$ npm install svg-spritemap-webpack-plugin@next

Please test this release out using both Webpack 4 and 5 if possible and report any problems. If nothing pops up during the coming days I'll release it with the latest dist-tag this Sunday.

[cascornelissen]

With the release of 3.6.2 on NPM with the latest dist-tag: Webpack 5 is now officially supported 🚀

If anyone runs into anything, please create a new issue.