Mini-css-extract-plugin: Webpack 5 Beta 2: Plugin fails on recompilation because it uses deprecated api

[IdeaHunter]

• Operating System: Window 10
• Node Version: 12.9.1
• NPM Version: 6.10.2
• webpack Version: 5.0.0-beta.2
• mini-css-extract-plugin Version: 0.8.0

Expected Behavior

Plugin should not use deprecated api

Actual Behavior

c:\Frontend\node_modules\webpack\lib\ChunkGraph.js:1156
                                        throw new Error(
                                        ^

Error: Chunk.modulesIterableThere was no ChunkGraph assigned to the Chunk for backward-compat (Use the new API)
    at c:\Frontend\node_modules\webpack\lib\ChunkGraph.js:1156:12
    at deprecated (internal/util.js:67:15)
    at Function.getChunkGraphForChunk (c:\Frontend\node_modules\webpack\lib\ChunkGraph.js:1147:18)
    at HotUpdateChunk.get modulesIterable [as modulesIterable] (c:\Frontend\node_modules\webpack\lib\Chunk.js:163:33)
    at c:\Frontend\node_modules\mini-css-extract-plugin\dist\index.js:198:50
    at c:\Frontend\node_modules\webpack\lib\ChunkTemplate.js:33:16
    at Hook.eval (eval at create (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:12:16)
    at Compilation.getRenderManifest (c:\Frontend\node_modules\webpack\lib\Compilation.js:2213:36)
    at c:\Frontend\node_modules\webpack\lib\HotModuleReplacementPlugin.js:339:45
    at Hook.eval (eval at create (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:9:1)
    at Hook.CALL_DELEGATE [as _call] (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
    at cont (c:\Frontend\node_modules\webpack\lib\Compilation.js:1508:38)
    at c:\Frontend\node_modules\webpack\lib\Compilation.js:1555:6
    at c:\Frontend\node_modules\neo-async\async.js:2830:7
    at Object.each (c:\Frontend\node_modules\neo-async\async.js:2850:39)
    at Compilation.createChunkAssets (c:\Frontend\node_modules\webpack\lib\Compilation.js:2226:12)
    at c:\Frontend\node_modules\webpack\lib\Compilation.js:1551:10
    at Hook.eval [as callAsync] (eval at create (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Compilation.seal (c:\Frontend\node_modules\webpack\lib\Compilation.js:1445:27)
    at c:\Frontend\node_modules\webpack\lib\Compiler.js:770:19
    at c:\Frontend\node_modules\webpack\lib\Compilation.js:1369:4
    at eval (eval at create (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
    at c:\Frontend\node_modules\neo-async\async.js:2830:7
    at Object.each (c:\Frontend\node_modules\neo-async\async.js:2850:39)
    at c:\Frontend\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:209:18
    at c:\Frontend\node_modules\neo-async\async.js:2830:7
    at Object.each (c:\Frontend\node_modules\neo-async\async.js:2850:39)
    at c:\Frontend\node_modules\webpack\lib\FlagDependencyExportsPlugin.js:40:16
    at Hook.eval [as callAsync] (eval at create (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (c:\Frontend\node_modules\webpack\node_modules\tapable\lib\Hook.js:18:14)
    at Compilation.finish (c:\Frontend\node_modules\webpack\lib\Compilation.js:1338:28)
    at c:\Frontend\node_modules\webpack\lib\Compiler.js:765:18
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
error Command failed with exit code 1.

Code

new MiniCssExtractPlugin({
    filename: 'frame.css'
}),

How Do We Reproduce?

Add plugin to webpack 5 config without loader (loader is not enabled on developer mode) and start webpack in watch mode. First compilation would be successful but if you do any changes to js (without even touching css) recompilation fails and webpack dies 💀 ✝️

Related tickets:

330

[alexander-akait]

WIP

[sokra]

Seem like HotUpdateChunks don't have a fallback ChunkGraph assigned. Should be a one line fix.

After this line

https://github.com/webpack/webpack/blob/06953237ab3781a576c35bf9a4e76284e4b20b1e/lib/HotModuleReplacementPlugin.js#L331

set the ChunkGraph like this:

ChunkGraph.setChunkGraphForChunk(hotUpdateChunk, chunkGraph);

(i. e. like here https://github.com/webpack/webpack/blob/06953237ab3781a576c35bf9a4e76284e4b20b1e/lib/Compilation.js#L1867)

and send a PR if this works

[IdeaHunter]

@sokra the problem is gone, but it seems like a there is some issues with HMR compatability(warnings). Im going to create an issue at webpack repo but a little bit later.
Thanks a lot for a help