-
-
Notifications
You must be signed in to change notification settings - Fork 388
Description
- Operating System: Mac Os Mojave (10.14.2)
- Node Version:
10.16.01
- NPM Version: (Yarn)
1.21.1
- webpack Version:
5.0.0-beta.23
- mini-css-extract-plugin Version:
0.9.0
Expected Behavior
With v5, Webpack now supports specifying multiple files per entry as well as the dependOn
key (see docs here).
Example:
module.exports = {
//...
entry: {
app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
'react-vendors': ['react', 'react-dom', 'prop-types']
}
};
Previously, Webpack v4 supported multiple files OR specifying an object with dependOn
. As far as I can tell from their v5 docs, the above example is newly added and this is not something that was supported in v4
(For context, dependOn
allows certain packs (entry points) to depend on others and is a way of splitting out packs into smaller chunks but still maintaining a "common" or "shared" chunk.)
Actual Behavior
When implementing the above approach with Webpack v5 (beta.23
) and mini-css-extract-plugin
(0.9.0
), I get the below error. (see Code
section below for implementation details)
Uncaught TypeError: ({common:0}) is not a function
Specifically this error references the following lines in the compiled JavaScript pack
...
/******/ // object to store loaded CSS chunks
/******/ var installedCssChunks = {
/******/ "common": 0
/******/ }/* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "common": 0
/******/ };
....
As shown, it's treating the object {"common": 0}
like a function and calling it with an argument (and then assigning the result to installedCssChunks
)
Code
Here is my full webpack config, where you can see how MiniCssExtractPlugin
is defined and used.
The entry
key specifically is presented below. As you can see, it's using the new Webpack v5 functionality that allows defining multiple files per entry point along with dependOn
.
'entry': {
'common': `${ASSETS_DIR}/javascript/packs/common.js`,
'admin': {
'import': [
`${ASSETS_DIR}/javascript/packs/admin.js`,
`${ASSETS_DIR}/stylesheets/packs/admin.scss`
],
'dependOn': 'common'
},
'auth': {
'import': [
`${ASSETS_DIR}/javascript/packs/auth.js`,
`${ASSETS_DIR}/stylesheets/packs/auth.scss`
],
'dependOn': 'common'
},
'users-index': {
'import': [
`${ASSETS_DIR}/javascript/packs/users-index.js`,
`${ASSETS_DIR}/stylesheets/packs/users-index.scss`
],
'dependOn': 'common'
},
'users-show': {
'import': [
`${ASSETS_DIR}/javascript/packs/users-show.js`,
`${ASSETS_DIR}/stylesheets/packs/users-show.scss`
],
'dependOn': 'common'
}
},
The idea is that all packs depend on common
and each pack is made up of a JS and CSS file.
The CSS file is processed by mini-css-extract-plugin
(and has historically worked well for me in production).
How Do We Reproduce?
- Install Webpack
5.0.0-beta.23
- Install
mini-css-extract-plugin
0.9.0
- Use a webpack config that specifies multiple files per entry along with
dependOn
- Load a page that sources a non-common pack (e.g.
admin
in my example above). Verify whether the compiledadmin.js
andadmin.css
webpack assets load successfully.