Deserialization errors when using filesystem cache

[szimek]

Hi!

Our development builds are really slow, so I thought about using built-in persistent cache and switch it from the default memory to filesystem. Unfortunately, it doesn't really seem to do anything and the startup time hasn't changed. I noticed the following errors (a lot of them) in the output:

[webpack.cache.PackFileCacheStrategy] Restoring failed for SourceMapDevToolPlugin|css/common.css from pack: Error: No deserializer registered for webpack/lib/asset/RawDataUrlModule/null
(during deserialization of Map)
(during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems)

[webpack.cache.PackFileCacheStrategy] Restoring failed for SourceMapDevToolPlugin|js/16.chunk.js from pack: Error: No deserializer registered for webpack/lib/asset/RawDataUrlModule/null
(during deserialization of Map)
(during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems)

[webpack.cache.PackFileCacheStrategy] Restoring failed for CopyWebpackPlugin|app/assets/images/flags/kp.png|4 from pack: Error: No deserializer registered for webpack/lib/asset/RawDataUrlModule/null
(during deserialization of Map)
(during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems)

[webpack.cache.PackFileCacheStrategy] Restoring failed for ResolverCachePlugin|normal|default|dependencyType=|esm|path=|/node_modules/@mui/x-date-pickers/CalendarPicker|request=|./PickersCalendarHeader from pack: Error: No deserializer registered for webpack/lib/asset/RawDataUrlModule/null
(during deserialization of Map)
(during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems)

...

It looks like I'm getting this error for every file, JS, CSS, images, etc. :/ Any idea what it can be caused by? I'm not sure where the null part comes from in webpack/lib/asset/RawDataUrlModule/null.

My cache config is simply: cache: { type: 'filesystem' }.

UPDATE:
I removed all entrypoints and started adding them back one by one to see when it starts throwing these errors.
One cause that I found so far, is a CSS entrypoint (yes, we've got those) that imports a very old minified CSS file (jquery-ui-1.10.0.custom.min from 2013...) that includes some background-image: url(...) declaration, where image paths point to non-existing images. If I remove this single import it works fine. When I add it, webpack starts reporting these errors.

[alexander-akait]

Do you have warnings/errors when you set memory?

[alexander-akait]

Or maybe you can provide the configuration file?

[alexander-akait]

Also please run npm ls webpack

[alexander-akait]

Reproduced... Yeah, it is a bug

[alexander-akait]

Will fix tomorrow

[szimek]

Hi @alexander-akait!

Do you have warnings/errors when you set memory?

No.

I think I figured out what the issue is. Here's an example that replicates it: https://stackblitz.com/edit/github-nb6ybc-5qrl4h?file=webpack.config.js (I updated this link, as I think the previous one linked to a wrong project).

We have a third-party CSS code (jquery-ui-1.10.0.custom.min) that refers to images using paths that start with images/, e.g. images/ui-icons_222222_256x240.png. However, as these images are not present in our repo, webpack builds failed. Someone figured out how to fix it without changing the third-party CSS code by setting resolve.alias.images: false in our webpack config 🤦 . This makes webpack build pass, even though these images are missing.

However, for some reason it breaks webpack cache (de)serialization. It didn't work for us with memory, it's just that nobody noticed it before, as there were no warnings or errors.

Please let me know if it's better to create an issue for this.

[alexander-akait]

Fix - #18138