webpack-contrib/mini-css-extract-plugin

waitFor can only be called for an already started item

boldtrn opened this issue ยท 15 comments

Bug report

Actual Behavior

When using watch, the build fails after the first successful build (whenever you change the css).

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: waitFor can only be called for an already started item
    at AsyncQueue.waitFor (./node_modules/webpack/lib/util/AsyncQueue.js:180:5)
    at ./node_modules/webpack/lib/Compilation.js:4621:25
    at processQueue (./node_modules/webpack/lib/util/processAsyncTree.js:50:4)
    at processTicksAndRejections (node:internal/process/task_queues:78:11)

Expected Behavior

The build should succeed.

How Do We Reproduce?

When upgrading from 2.3.0 to 2.4.0 this issue was introduced for me.

This is my webpack config (nothing special I guess):

{
                    test: /\.scss$/,
                    include: [path.resolve(__dirname, 'app/Resources/scss')],
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {},
                        },
                        {
                            loader: 'css-loader',
                            options: {},
                        },
                        {
                            loader: 'postcss-loader',
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sassOptions: {
                                    includePaths: [path.resolve(__dirname, 'node_modules')],
                                },
                            },
                        },
                    ],
                },

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Memory: 138.34 MB / 16.00 GB
  Binaries:
    Node: 16.9.1 - ~/.nvm/versions/node/v16.9.1/bin/node
    npm: 7.21.1 - ~/.nvm/versions/node/v16.9.1/bin/npm
  Packages:
    babel-loader: ^8.2.2 => 8.2.2 
    copy-webpack-plugin: ^9.0.1 => 9.0.1 
    css-loader: 6.1.0 => 6.1.0 
    css-minimizer-webpack-plugin: 3.0.2 => 3.0.2 
    postcss-loader: 6.1.1 => 6.1.1 
    replace-in-file-webpack-plugin: ^1.0.6 => 1.0.6 
    sass-loader: ^12.2.0 => 12.2.0 
    webpack: 5.58.1 => 5.58.1 
    webpack-cli: 4.9.0 => 4.9.0 

Can't reproduce, sorry, please provide reproducible test repo and I will reopen

Thanks for looking at this issue. A few notes on reproduction, as I am not sure if I explained the workflow properly.

Run: webpack --config webpack.config.js --mode=development --watch

The first initial build works fine. The "second" build, after you have change a file fails. If that's what you tried and this works I can double check if I can provide a sample repo, but I am a bit tight time wise right now :).

@boldtrn reproducible test repo will be great, can you try to disable replace-in-file-webpack-plugin? Also please update webpack to 5.58.2 and check it again

try to disable replace-in-file-webpack-plugin? Also please update webpack to 5.58.2 and check it again

Thanks for your recommendations. I tried both, but it is still failing.

We need reproducible test repo in this case

akphi commented

I will try to create a repro, but like @boldtrn said, if I use this plugin in development mode, the first build works fine, after making a small change to a sass/css file that causes a recompile, I will get this error.

@alexander-akait do you want me to file another issue or I can use this one?

I just ran into this, I didn't go too deep into debugging or trying to reproduce, but...

Are you using fontawesome? I was using the css of v5. I changed my @import of the css file to the scss version.

In other words, I changed this:

@import "~@fortawesome/fontawesome-free/css/all.css";

to this:

@import "~@fortawesome/fontawesome-free/scss/fontawesome";

Now it will recompile successfully on save. Note that now I get a LOT of warnings about Using / for division... from the fontawesome scss files, but it works.

akphi commented

@brainthinks I'm trying to come up with a repro right now and I found that by disabling some of the @import '.../..../something.css the problem is solved, so I think we're moving in the same direction. I'll do a bit more digging to pin-point the issue. But then again, this works perfectly in production mode, so I don't think the problem comes from sass-loader or sass but this plugin, we just need to find where things go wrong

akphi commented

@alexander-akait so this is my repro akphi/issue-repo#3

Like @brainthinks mentioned, this happens when I try to @import 3rd-party libraries' css files (be it fontawesome or @ag-grid-community in my case)

Also, I just did a quick test using this repro, the problem doesn't show up in mini-css-extract-plugin@2.3.0 so it is potentially introduced somewhere between 2.3.0 and 2.4.0, as such for folks on this thread that needs a workaround for now, I suggest trying out 2.3.0

I will look at repo too, but we have this bug webpack/webpack#14484, I think it is the same

Yes the linked seems like the same error, thanks for linking ๐Ÿ‘ .

@akphi Yep, the same problem, we will try to fix it in Monday

akphi commented

Confirmed that this has been fixed after upgrading to webpack@5.59.0 (webpack/webpack#14484)

Can confirm after a quick test, updating to webpack@5.59.0 fixed the issue.

Had the same issue and this solved mine
โš ๏ธ Note that if you import CSS from your webpack entrypoint or import styles in the initial chunk, mini-css-extract-plugin will not load this CSS into the page. Please use html-webpack-plugin for automatic generation link tags or create index.html file with link tag.

From Webpack documentation
Read more by linking to webpack