Cannot read property 'pop' of undefined

[purple-force]

• 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

[fivethreeo]

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

[khades]

more likely this #341

[alexandrukis]

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,
    }
}

[alexander-akait]

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