Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

adding splitChunks all is breaking the module exports

See original GitHub issue

Operating System: macOS mojave
Node Version: v11.3.0
NPM Version: 6.7.0
webpack Version: 4.33.0
mini-css-extract-plugin Version: 0.7.0

Expected Behavior

Having concatenated all CSS in the file should not break the module exports.

Actual Behavior

Adding the splitChunks optimization for a single css file is breaking the umd build exports.

Code

optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },

How Do We Reproduce?

create with umd build as output and configure the optimization rule and try and importing the component from the library. it fails with error

TypeError: Cannot read property <functionName> of undefined

Issue Analytics

State:
Created 4 years ago
Reactions:10
Comments:29 (9 by maintainers)

Top GitHub Comments

4reactions

yazonnilecommented, Jan 25, 2020

Guys, I dont know a root problem, but I make this thing works for me. splitChunks all generates two files. 1 - styles.css itself. 2- styles.js file with empty css files modules And the problem is - this styles.js file is not used in main bundle file index.js

so in my html file

was

<script defer src="/index.js"></script>

now

with AutomaticPrefetchPlugin for makes this work before main bundle

<script defer src="/styles.js"></script>
<script defer src="/index.js"></script>

3reactions

kalbert312commented, Sep 9, 2019

After more digging, it looks like the extra JS file produced might be the cause?. Something isn’t getting executed.

1.index.js:

(this["webpackJsonpmymodule"] = this["webpackJsonpmymodule"] || []).push([[1],{

/***/ 6:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ }),

/***/ 7:
/***/ (function(module, exports, __webpack_require__) {

// extracted by mini-css-extract-plugin

/***/ })

}]);
//# sourceMappingURL=1.index.js.map

When this file gets generated, the main js file has different code generated:

Good:

return /******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 9);

Bad:

	return /******/ (function(modules) { // webpackBootstrap
		/******/ 	// install a JSONP callback for chunk loading
		/******/ 	function webpackJsonpCallback(data) {
			/******/ 		var chunkIds = data[0];
			/******/ 		var moreModules = data[1];
			/******/ 		var executeModules = data[2];
			/******/
			/******/ 		// add "moreModules" to the modules object,
			/******/ 		// then flag all "chunkIds" as loaded and fire callback
			/******/ 		var moduleId, chunkId, i = 0, resolves = [];
			/******/ 		for(;i < chunkIds.length; i++) {
				/******/ 			chunkId = chunkIds[i];
				/******/ 			if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
					/******/ 				resolves.push(installedChunks[chunkId][0]);
					/******/ 			}
				/******/ 			installedChunks[chunkId] = 0;
				/******/ 		}
			/******/ 		for(moduleId in moreModules) {
				/******/ 			if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
					/******/ 				modules[moduleId] = moreModules[moduleId];
					/******/ 			}
				/******/ 		}
			/******/ 		if(parentJsonpFunction) parentJsonpFunction(data);
			/******/
			/******/ 		while(resolves.length) {
				/******/ 			resolves.shift()();
				/******/ 		}
			/******/
			/******/ 		// add entry modules from loaded chunk to deferred list
			/******/ 		deferredModules.push.apply(deferredModules, executeModules || []);
			/******/
			/******/ 		// run deferred modules when all chunks ready
			/******/ 		return checkDeferredModules();
			/******/ 	};
		/******/ 	function checkDeferredModules() {
			/******/ 		var result;
			/******/ 		for(var i = 0; i < deferredModules.length; i++) {
				/******/ 			var deferredModule = deferredModules[i];
				/******/ 			var fulfilled = true;
				/******/ 			for(var j = 1; j < deferredModule.length; j++) {
					/******/ 				var depId = deferredModule[j];
					/******/ 				if(installedChunks[depId] !== 0) fulfilled = false;
					/******/ 			}
				/******/ 			if(fulfilled) {
					/******/ 				deferredModules.splice(i--, 1);
					/******/ 				result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
					/******/ 			}
				/******/ 		}
			/******/
			/******/ 		return result;
			/******/ 	}
		/******/
		/******/ 	// The module cache
		/******/ 	var installedModules = {};
		/******/
		/******/ 	// object to store loaded and loading chunks
		/******/ 	// undefined = chunk not loaded, null = chunk preloaded/prefetched
		/******/ 	// Promise = chunk loading, 0 = chunk loaded
		/******/ 	var installedChunks = {
			/******/ 		0: 0
			/******/ 	};
		/******/
		/******/ 	var deferredModules = [];
		/******/
		/******/ 	// The require function
		/******/ 	function __webpack_require__(moduleId) {
			/******/
			/******/ 		// Check if module is in cache
			/******/ 		if(installedModules[moduleId]) {
				/******/ 			return installedModules[moduleId].exports;
				/******/ 		}
			/******/ 		// Create a new module (and put it into the cache)
			/******/ 		var module = installedModules[moduleId] = {
				/******/ 			i: moduleId,
				/******/ 			l: false,
				/******/ 			exports: {}
				/******/ 		};
			/******/
			/******/ 		// Execute the module function
			/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
			/******/
			/******/ 		// Flag the module as loaded
			/******/ 		module.l = true;
			/******/
			/******/ 		// Return the exports of the module
			/******/ 		return module.exports;
			/******/ 	}
		/******/
		/******/
		/******/ 	// expose the modules object (__webpack_modules__)
		/******/ 	__webpack_require__.m = modules;
		/******/
		/******/ 	// expose the module cache
		/******/ 	__webpack_require__.c = installedModules;
		/******/
		/******/ 	// define getter function for harmony exports
		/******/ 	__webpack_require__.d = function(exports, name, getter) {
			/******/ 		if(!__webpack_require__.o(exports, name)) {
				/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
				/******/ 		}
			/******/ 	};
		/******/
		/******/ 	// define __esModule on exports
		/******/ 	__webpack_require__.r = function(exports) {
			/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
				/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
				/******/ 		}
			/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
			/******/ 	};
		/******/
		/******/ 	// create a fake namespace object
		/******/ 	// mode & 1: value is a module id, require it
		/******/ 	// mode & 2: merge all properties of value into the ns
		/******/ 	// mode & 4: return value when already ns object
		/******/ 	// mode & 8|1: behave like require
		/******/ 	__webpack_require__.t = function(value, mode) {
			/******/ 		if(mode & 1) value = __webpack_require__(value);
			/******/ 		if(mode & 8) return value;
			/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
			/******/ 		var ns = Object.create(null);
			/******/ 		__webpack_require__.r(ns);
			/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
			/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
			/******/ 		return ns;
			/******/ 	};
		/******/
		/******/ 	// getDefaultExport function for compatibility with non-harmony modules
		/******/ 	__webpack_require__.n = function(module) {
			/******/ 		var getter = module && module.__esModule ?
				/******/ 			function getDefault() { return module['default']; } :
				/******/ 			function getModuleExports() { return module; };
			/******/ 		__webpack_require__.d(getter, 'a', getter);
			/******/ 		return getter;
			/******/ 	};
		/******/
		/******/ 	// Object.prototype.hasOwnProperty.call
		/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
		/******/
		/******/ 	// __webpack_public_path__
		/******/ 	__webpack_require__.p = "";
		/******/
		/******/ 	var jsonpArray = this["webpackJsonpmymodule"] = this["webpackJsonpmymodule"] || [];
		/******/ 	var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
		/******/ 	jsonpArray.push = webpackJsonpCallback;
		/******/ 	jsonpArray = jsonpArray.slice();
		/******/ 	for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
		/******/ 	var parentJsonpFunction = oldJsonpFunction;
		/******/
		/******/
		/******/ 	// add entry module to deferred list
		/******/ 	deferredModules.push([11,1]);
		/******/ 	// run deferred modules when ready
		/******/ 	return checkDeferredModules();
		/******/ })

Top Results From Across the Web

SplitChunksPlugin - webpack

splitChunks. This configuration object represents the default behavior of the SplitChunksPlugin . webpack.config.js module.exports = { //... optimization: ...

Webpack 5 splitChunks breaks WebpackDevServer

I don't know how to fix it with webpack@5, but downgrading to previous version of react-app is enough for me. Just add explicit...

Webpack (v4) Code Splitting using SplitChunksPlugin - Medium

When that promise resolves, it returns whatever that module is exporting. A module can be an npm module or a local file, anything...

Webpack 4: Step By Step: Split Chunks Plugin

It does not have to be all third party in one bundle. WebUi. webpack.config.js. In addition to just splitting the code ...

Using Webpack with React, Pt. 1 - Toptal

Then we'll add a module section to our Webpack config, making babel-loader responsible for loading JavaScript files: @@ -11,6 +11,25 @@ module.exports ......