Runtime error after switching between dev-server and watch mode when using filesystem cache

[Raykeen]

Bug report

Using config with filesystem cache and mini-css-extract-plugin after switching from building project with dev-server to build with --watch I get runtime error Uncaught TypeError: Cannot read properties of undefined (reading 'dispose') ... .
I'm not shure if it's bug in plugin or webpack.

Actual Behavior

After build completes I open builded page and get runtime error:
Uncaught TypeError: Cannot read properties of undefined (reading 'dispose') ...
The code of main js entrypoint doesn't run.

Expected Behavior

No error and main js entrypoint runs.

How Do We Reproduce?

https://github.com/Raykeen/webpack-dev-watch-switch-hmr-issue

[alexander-akait]

Yeah, I will add protection to this, but you need to fix your configuration for better caching, because dev and watch are different, you need to say webpack invalidate cache:

cache: {
        type: "filesystem",
        version: JSON.stringify({
            serve: process.env.WEBPACK_SERVE
        }),
        buildDependencies: {
            config: [__filename],
        }
    },

i.e. you invalidate cache between serve and watch, because when you run serve you have hot content

[Raykeen]

Yeah, I will add protection to this, but you need to fix your configuration for better caching, because dev and watch are different, you need to say webpack invalidate cache:

cache: {
        type: "filesystem",
        version: JSON.stringify({
            serve: process.env.WEBPACK_SERVE
        }),
        buildDependencies: {
            config: [__filename],
        }
    },

i.e. you invalidate cache between serve and watch, because when you run serve you have hot content

This fix works, thanks!

We often use both serve and watch, so more efficient solution for us is changing a name of cache like this.

cache: {
    name: `${name}-${inProduction ? "production" : "development"}${isDevServer ? "-hmr" : "" }`,
    ...
}

It would be better if this was the default behavior of webpack cache, but this is a webpack issue.

[alexander-akait]

Yeah, we will consider it