Closed
Description
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.
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: