Uncaught TypeError when using multiple files per entry on Webpack v5

[abhchand]

• 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 compiled admin.js and admin.css webpack assets load successfully.

[sokra]

Looks like a missing semicolon. For backward compat reasons webpack should better put a semicolon here because we can't rely on ASI

[abhchand]

@sokra - Appreciate your quick responses!

You suggested that "webpack should" put a semicolon here. For my own understanding: does that mean this is something that needs to be fixed in the core webpack library? Or is it something that can be addressed here?

[abhchand]

Never mind, read the code and answered my own question :)

I opened #561 and confirmed locally that it fixes the issue I was experiencing above.

Thanks again!