When caching to filesystem, html-bundler-webpack-plugin is breaking

[binarykitchen]

Hello again,

In short, I have a big React app and CPU/Memory usage with webpack goes very high, like 6GB, crashing my system.

So I decided to change the webpack caching to file system, like this:

    cache: {
      type: "filesystem",
      store: "pack",
      buildDependencies: {
        tsconfig: [resolvePath("tsconfig.json")],
      },
    },

Now, with webpack infrastructure logging enabled, I see this new error:

    [webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ResolverCachePlugin|normal|default|dependencyType=|esm|path=|/home/michael-heuberger/code/binarykitchen/videomail.io|request=|/home/michael-heuberger/code/binarykitchen/videomail.io/src/client/views/base.pug
    [webpack.cache.PackFileCacheStrategy] Storing pack...
<t> [webpack.cache.PackFileCacheStrategy] resolve build dependencies: 55.03136 ms
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve '/home/michael-heuberger/code/binarykitchen/videomail.io/etc/webpack' in '/home/michael-heuberger/code/binarykitchen/videomail.io'

Looks like there is a problem with the base HTML I'm importing in pug format that way:

      new HtmlBundlerPlugin({
        minify: isProd(),
        entry: {
          index: {
            import: clientPugEntry,
     ...

I think the bug is, it should compile the pug file before it gets cached.

Is this library tested when webpack is compiled into file system instead of memory while using pug?

[webdiscus]

@binarykitchen

The supporting of the filesystem caching is experimental. It's work in simple use cases. But I can't simulate all possible use cases to guarantee 100% functionality. Therefore it is noted in limitations.

Can you please create a small as possible a repo with reproducible problem. You can copy&past your React project, but replace in the project all "business secrets" with a dummy data.

P.S. the html bundler plugin is not designed/optimised for using with React. React have own building system or Vite is the bests choice.

[binarykitchen]

Thank you for your honesty. In that case, I will figure other solutions ...

[vralle]

I have just tried to set cache to filesystem and had got similar errors.

I turned logging on in webpack.config

infrastructureLogging: {
    level: 'verbose',
},

The first build has some information about caching, but succeeds:

...
[IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
[webpack-cli] Compiler finished
[webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: ResolverCachePlugin|normal|default|dependencyType=|esm|path=|/workspace/projects/domain|request=|/workspace/projects/domain/src/views/endpoint.html
...

Second build without any changes fails with errors:

...
[IdleFileCachePlugin] Initial cache was generated and cache will be persisted in 5s.
[webpack-cli] Compiler finished
[webpack.cache.PackFileCacheStrategy] Pack got invalid because of write to: Compilation/assets|html-bundler-webpack-plugin.650
...

...
ERROR in ./src/image.any
Can't handle conflicting asset info for sourceFilename
Error: Can't handle conflicting asset info for sourceFilename
...

I use image-minimizer-webpack-plugin with minimizer and generator setup and all of endpoint images have getting the same error.

HTML Bundler Plugin   ▶▶▶ (webpack 5.97.1) compiled with 22 errors

I haven't found any clear instructions on caching for plugins. I guess it's not an easy task with the current Webpack architecture.

[webdiscus]

@vralle

Can you please create a small repo with reproducible problem and open new issue?
Thanks!

[vralle]

https://github.com/vralle/webpack-html-bundler-starting-template.git

you can try that)

[webdiscus]

@vralle
there ist the issue.
Thanks!