Cache breaks asset module live reloading #13275

stefan-toubia · 2021-04-30T03:18:42Z

Bug report

What is the current behavior?
Live reloading breaks for assets using asset/resource rule type when caching is enabled.

If the current behavior is a bug, please provide the steps to reproduce.

Add an asset loader rule:

      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },

Import an asset

import React from "react";
import ReactDOM from "react-dom";
import logoSrc from "./assets/logo.png";

import "./styles.less";

const App = (): JSX.Element => (
  <div>
    <img src={logoSrc} alt="logo" />
    <div>Hello, React!</div>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

The initial page load works as expected.
Commenting out the img and/or import, then reverting causes the image asset to be not found.

$ curl http://localhost:9009/assets/logo-ff7cf555f3ab2107e716.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /assets/[email protected]</pre>
</body>
</html>

Disabling the cache "fixes" the issue

// webpack.config.js
module.exports = {
  ...
  cache: false,
  ...
}

It's also not an issue when using asset/inline.

webpack.config.js

What is the expected behavior?
I know "it should work" is not helpful, but it seems self explanatory here.

Other relevant information:
webpack version: 5.36.1
Node.js version: 10.24.1
Operating System: OS X 10.14.6
Additional tools:

The text was updated successfully, but these errors were encountered:

sokra · 2021-04-30T07:47:11Z

Do you have output.clean: true or some other cleaning plugin in config?

sokra · 2021-04-30T09:13:46Z

Might be fixed by #13276

stefan-toubia · 2021-04-30T21:29:29Z

Yes, I'm using output.clean and confirmed that asset reloading works as expected when clean is disabled. For now I can turn clean off in development.

sokra · 2021-05-01T06:29:00Z

This should be fixed in the latest version

alexander-akait · 2021-05-01T17:08:41Z

Confirmed, fixed by https://github.com/webpack/webpack/releases/tag/v5.36.2, the same issue webpack/webpack-dev-server#3175 (comment), let's close, feel free to feedback

alexilin83 · 2021-10-06T12:29:40Z

It seems that bug still exists. I'm using webpack 5.57.1 and with output.clean = true image assets not fount after hot reload.

alexander-akait · 2021-10-06T12:32:20Z

Please provide reproducible test repo

alexilin83 · 2021-10-06T12:41:12Z

Please provide reproducible test repo

https://github.com/alexilin83/webpack_test_image

sokra · 2021-10-06T13:31:47Z

@jantimon This is related to the caching in html-webpack-plugin. output.clean removes all files that are not emitted as compilation.assets. html-webpack-plugin need to make sure to always put their assets into compilation.assets even when cached.

alexander-akait · 2021-10-06T13:32:49Z

Duplicate jantimon/html-webpack-plugin#1639

alexander-akait · 2021-10-06T13:33:07Z

@alexilin83 Workaround - cache: false for html-webpack-plugin

alexilin83 · 2021-10-06T13:45:52Z

@alexilin83 Workaround - cache: false for html-webpack-plugin

Doesn't work for me. I updated the test repository.

alexander-akait · 2021-10-06T13:47:10Z

hm, weird, looks like it is not real disable cache, anyway we can't fix it here

alexilin83 · 2021-10-06T13:48:26Z

ok, thanks anyway.

jantimon · 2021-10-06T15:33:56Z

that would be a regression - html-webpack-plugin writes asset for every compilation

https://github.com/jantimon/html-webpack-plugin/blob/2f5de7ab9e8bca60e9e200f2e4b4cfab90db28d4/index.js#L172

and

https://github.com/jantimon/html-webpack-plugin/blob/2f5de7ab9e8bca60e9e200f2e4b4cfab90db28d4/index.js#L257

alexander-akait · 2021-10-06T15:38:09Z

@jantimon here repo https://github.com/alexilin83/webpack_test_image, check this

alexander-akait · 2021-10-06T15:39:02Z

No problems without html-webpack-plugin

alexander-akait · 2021-10-06T21:43:12Z

@jantimon the main problem - previousEmittedAssets is not contained from HTML template, i.e. <img src="./images/photo.jpg" alt="">, it even do not disabling using cache: false due broken logic for assets, it is really high priory problem

alexander-akait · 2021-10-06T22:12:57Z

@jantimon You should emit child assets, go to here https://github.com/jantimon/html-webpack-plugin/blob/main/lib/child-compiler.js#L151, write console.log(childCompilation.assets) and you will see assets which should be reemmited

alexander-akait · 2021-10-06T22:33:18Z

To fix this:

in child-compier.js

result[this.templates[entryIndex]] = {
  content: templateSource,
  hash: childCompilation.hash || 'XXXX',
  entry: entries[entryIndex],
  assets: childCompilation.assets,
};

index.js

if (isCompilationCached && options.cache && assetJson === newAssetJson) {
  previousEmittedAssets.forEach(({ name, html, source }) => {
    compilation.emitAsset(name, source ? source : new webpack.sources.RawSource(html, false));
  });
  return callback();
  } else {
    previousEmittedAssets = [];
    assetJson = newAssetJson;
}

// ...
// ...
// ...

const replacedFilename = replacePlaceholdersInFilename(filename, html, compilation);
// Add the evaluated html code to the webpack assets
compilation.emitAsset(replacedFilename.path, new webpack.sources.RawSource(html, false), replacedFilename.info);
previousEmittedAssets.push({ name: replacedFilename.path, html });
              
Object.keys(templateResult.compiledEntry.assets).forEach((name) => {
  const source = templateResult.compiledEntry.assets[name];

  previousEmittedAssets.push({ name: name, source });
})
              
return replacedFilename.path;

Note - it is simple fix and not full, you should keep assetsInfo and re in emitAsset, also it is fix only cache: true, logic is still broken for cache: false, but you can use the same approach (i.e. previousEmittedAssets = [] replace on logic for cache: true), also note - assets can be changed and you should invalidate cache own cache too, the main problem - you should not use custom caching, webpack already has great built-in cache API. Also I don't understand why do you use loader for cache, it is really weird and decrease perf and memory usage, you need just static function (provided by developer) and use it, or you can create own Module (like we do in mini-css-extract-plugin - CssModules) and no problems with cache anymore.

A while ago I asked you to move repo inside webpack-contrib so it will be already implemented and works fine, but for some reason you didn’t want it 🤔

jantimon · 2021-10-07T05:53:38Z

thanks alex - sorry I had a long work day yesterday.. let me take a look :)

to summarise the issue to ensure we are on the same page:

✅ index.html is depending on './images/photo.jpg
✅ HtmlWebpackPlugin is emitting everything correctly
✅ the user triggers a new compile
✅ webpack clean deletes all assets
🕷 HtmlWebpackPlugin is emitting only .html assets
💣 the image is missing

Can we move this bug to the html-webpack-plugin issue tracker?

Maybe a short note on cache:true/false - the cache option was introduced long long time ago..
back then webpack would emit files again automatically.
basically it does the folloing

cache:false will execute the template (think of this.importModule) for every compilation to allow accessing the latest compilation object
cache:true will compile and execute only if the html entry file or one of its dependencies change

Caching is a tricky topic and 7 years ago when the html-webpack-plugin was created it was very difficult to have a good performance for child compiler especially without an entry point in webpack

I am happy for better caching ideas - or even better remove them if they are no longer needed..
Could you please try to explain what you mean by "use loader for cache you need just static function by developer"?
Do you mean the templateContent feature?

new HtmlWebpackPlugin({
  templateContent: ({htmlWebpackPlugin}) => `
    <html>
      <head>
        <title>Hello World</title>
      </head>
      <body>
        <h1>Hello World</h1>
      </body>
    </html>
  `
})

one challenge for caching was that some people use the HtmlWebpackPlugin to generate many many many files out of the same template e.g.:

new HtmlWebpackPlugin({
  filename: "[name].html"
})

Do you think we could solve all those cases with an additional Module?
I am very happy if we can find a better caching logic..
It adds a lot of complexity to the html-webpack-plugin

alexander-akait · 2021-10-07T10:20:29Z

@jantimon Only you can move this issue to html-webpack-plugin issue tracker, let's do it. You can look how mini-css-extract-plugin implements right logic, it is real not hard

alexander-akait · 2024-02-15T14:19:04Z

Fixed in html-webpack-plugin

webpack-bot added webpack-5 bug labels Apr 30, 2021

alexander-akait closed this as completed May 1, 2021

alexander-akait reopened this Oct 6, 2021

alexander-akait mentioned this issue Sep 27, 2022

image link breaks after updating scss with html-loader webpack/webpack-dev-server#4481

Closed

g3tr1ght mentioned this issue Dec 28, 2022

[contenthash] doesn't match between the assets in hooks and emitted output jantimon/html-webpack-plugin#1638

Open

alexander-akait closed this as completed Feb 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cache breaks asset module live reloading #13275

Cache breaks asset module live reloading #13275

stefan-toubia commented Apr 30, 2021

sokra commented Apr 30, 2021

sokra commented Apr 30, 2021

stefan-toubia commented Apr 30, 2021

sokra commented May 1, 2021

alexander-akait commented May 1, 2021

alexilin83 commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexilin83 commented Oct 6, 2021

sokra commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexilin83 commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexilin83 commented Oct 6, 2021

jantimon commented Oct 6, 2021 •

edited

Loading

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

jantimon commented Oct 7, 2021 •

edited

Loading

alexander-akait commented Oct 7, 2021

alexander-akait commented Feb 15, 2024

Cache breaks asset module live reloading #13275

Cache breaks asset module live reloading #13275

Comments

stefan-toubia commented Apr 30, 2021

Bug report

sokra commented Apr 30, 2021

sokra commented Apr 30, 2021

stefan-toubia commented Apr 30, 2021

sokra commented May 1, 2021

alexander-akait commented May 1, 2021

alexilin83 commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexilin83 commented Oct 6, 2021

sokra commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexilin83 commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexilin83 commented Oct 6, 2021

jantimon commented Oct 6, 2021 • edited Loading

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

alexander-akait commented Oct 6, 2021

jantimon commented Oct 7, 2021 • edited Loading

alexander-akait commented Oct 7, 2021

alexander-akait commented Feb 15, 2024

jantimon commented Oct 6, 2021 •

edited

Loading

jantimon commented Oct 7, 2021 •

edited

Loading