Mini-css-extract-plugin: Cannot read property 'pop' of undefined

Created on 25 Feb 2020 · 4Comments · Source: webpack-contrib/mini-css-extract-plugin

Operating System: macOS Catalina 10.15.2
Node Version: 10.16.0
NPM Version: 6.9.0
webpack Version: 4.17.2
mini-css-extract-plugin Version: 0.9.0

Expected Behavior

A spa demo with two pages https://github.com/purple-force/mini-css-issue.

page1.jsx and page2.jsx is loaded by react-loadable in index.jsx, where react-loadable's loading is set to () => <Loading />. loading.jsx import loading.css. It will not throw above error if import './loading.css' is removed.

The error is from https://github.com/webpack-contrib/mini-css-extract-plugin/blob/master/src/index.js#L498, where bestMatch is undefined.

what expected is js, css files in build directory after run build with name set by output.filename and new MiniCssExtractPlugin's option filename. and css contents are in one file.But if chunkFilename is set，filename will be invalid.

Actual Behavior

Cannot read property 'pop' of undefined

Source

purple-force

👍3

Most helpful comment

This happens because your entry point shares its name with the cache group

entry: {
    index: './src/index.jsx',
},
...
cacheGroups: {
    indexStyles: {
        name: 'index',
        test: (m, c, entry = 'index') => {
            return m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry;
         },
         chunks: 'all',
         enforce: true,
    }
}

Try changing your cacheGroups definition to this, see if it works:

cacheGroups: {
    index: {
        name: 'indexStyles',
        test: (m, c, entry = 'index') => {
            return m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry;
         },
         chunks: 'all',
         enforce: true,
    }
}

alexandrukis on 26 Mar 2020

👍5 ❤1 😕1

All 4 comments

487 Got the same problem, any idea to the cause?

fivethreeo on 19 Mar 2020

more likely this #341

khades on 20 Mar 2020

This happens because your entry point shares its name with the cache group

entry: {
    index: './src/index.jsx',
},
...
cacheGroups: {
    indexStyles: {
        name: 'index',
        test: (m, c, entry = 'index') => {
            return m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry;
         },
         chunks: 'all',
         enforce: true,
    }
}

Try changing your cacheGroups definition to this, see if it works:

cacheGroups: {
    index: {
        name: 'indexStyles',
        test: (m, c, entry = 'index') => {
            return m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry;
         },
         chunks: 'all',
         enforce: true,
    }
}

alexandrukis on 26 Mar 2020

👍5 ❤1 😕1

Answer above, it will be an error in webpack@5 by default, we can't fix it on our side, sorry