Skip to content

Uncaught TypeError when using multiple files per entry on Webpack v5 #560

@abhchand

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions