I'm trying to debug a cache issue with integrity: true and output.filename = '[name].[contenthash].js', why would setting integrity affect the cache

[davidmurdoch]

I'm not yet sure what the root cause is, so can't provide a useful reproduction just yet (unless you think the entire MetaMask extension codebase would be useful).

The gist of it is that setting integrity: true while using output.filename = '[name].[contenthash].js' (and a whole bunch of other settings, of course) can cause webpack's RealContentHashPlugin to crash, but only in watch mode after adding a new import statement to a JS file.

I get dozens of errors like this one:

ERROR in RealContentHashPlugin
Some kind of unexpected caching problem occurred.
An asset was cached with a reference to another asset (___TMP-MkdU/WRbjt/NNXkiQNR3q17wa4fOtY+KiTtnqypW0z1eFvW7BH039HDomjylasQP) that's not in the compilation anymore.
Either the asset was incorrectly cached, or the referenced asset should also be restored from cache.
Referenced by:
 - runtime.e3ef84e993c262751e40.js: ...fNgsj7glCQyfV",722:"___TMP-MkdU/WRbjt/NNXkiQNR3q17wa4fOtY+KiTtnqypW0z1eFvW7BH039HDomjylasQP"},(()=>{t.b=documen...
 - runtime.e3ef84e993c262751e40.js.map: ...glCQyfV\",\"722\":\"___TMP-MkdU/WRbjt/NNXkiQNR3q17wa4fOtY+KiTtnqypW0z1eFvW7BH039HDomjylasQP\"};","__webpack_req...

setting output.filename = '[name].[contenthash].js' to output.filename = '[name].[fullhash].js' does not cause the error. So it seems like there is some complication with having a complex dependency graph (maybe due to circular dependencies), integrity hashing, and [contenthash].

Do you have any idea where I should look to further debug this so I can hopefully provide a reasonable reproduction?

[davidmurdoch]

Forgot to mention this is in production mode.

And I just noticed this plugin in Integrity.js:

if (isRealContentHash) {
          // triggers the RealContentHashPlugin.updateHash hook when it is enabled, in production mode
          compilation.updateAsset(
            childChunkFile,
            (source) => source,
            (assetInfo) => {
              return assetInfo
                ? {
                    ...assetInfo,
                    contenthash: Array.isArray(assetInfo.contenthash)
                      ? [...new Set([...assetInfo.contenthash, placeholder])]
                      : assetInfo.contenthash
                      ? [...new Set([assetInfo.contenthash, placeholder])]
                      : placeholder,
                  }
                : undefined;
            }
          );        

In development mode I get a different error:

TypeError: Cannot read properties of undefined (reading 'length')
    at Integrity.processAssets (/home/david/code/metamask-extension2/node_modules/html-bundler-webpack-plugin/src/Plugin/Extras/Integrity.js:166:53)
    at fn (/home/david/code/metamask-extension2/node_modules/webpack/lib/Compilation.js:486:10)
    at _next4 (eval at create (/home/david/code/metamask-extension2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:45:1)
    at eval (eval at create (/home/david/code/metamask-extension2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:63:1)
    at eval (eval at create (/home/david/code/metamask-extension2/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    ```

[davidmurdoch]

An interesting finding:

When the bug occurs, placeholder is the value undefined, and when undefined is passed to oldSource.indexOf(placeholder) is is coerced to the string "undefined". So if oldSource contains the string "undefined" it matches, and it then makes it to the placeholder.length check and fails with the Cannot read properties of undefined (reading 'length') error from above.

When this issue occurs, placeholderByChunkId is an empty Map.

[webdiscus]

@davidmurdoch
I have created the issue #110.