adding splitChunks all is breaking the module exports #408

varenya · 2019-06-11T15:25:18Z

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 of undefined

alexander-akait · 2019-06-11T16:13:47Z

Looks you have old global installed webpack, if not, please create minimum reproducible test repo

varenya · 2019-06-12T16:56:58Z

No, I don't have globally installed webpack. I will try and create a minimum reproducible test repo.

varenya · 2019-06-12T18:45:24Z

Heres the repo with the minimum reproducible test: https://github.com/varenya/webpack-reprod

varenya · 2019-06-15T05:36:55Z

@evilebottnawi I have reproduced the issue could u take a look? thanks.

alexander-akait · 2019-07-16T20:05:44Z

@varenya can't run you reproducible test repo, i will always got Module not found: Error: Can't resolve 'sample-package/style.css'

kalbert312 · 2019-09-09T15:07:50Z

I'm running into this problem as well. My main module's import is undefined with the splitChunks block. Removing it fixed the problem. Target UMD.

alexander-akait · 2019-09-09T15:23:59Z

@kalbert312 can you create minimum reproducible test repo?

kalbert312 · 2019-09-09T16:02:54Z

Done. Not super minimal but I reproduced the problem.
Repo: https://github.com/kalbert312/main-module-undefined

Steps:

Add "main-module-undefined": "git+ssh://[email protected]/kalbert312/main-module-undefined.git#good", to your project's package.json and run npm install.
Add this to your project somewhere:

import * as MainModule from "main-module-undefined";
console.log("Module: ", MainModule);

Run it and see that the export is as expected.
Change the dependency version to "main-module-undefined": "git+ssh://[email protected]/kalbert312/main-module-undefined.git#bad" and run npm install again.
Run project again. MainModule is undefined.

alexander-akait · 2019-09-09T16:13:43Z

What about this https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free?

kalbert312 · 2019-09-09T16:22:40Z

Looks like that did the trick for me: https://github.com/kalbert312/main-module-undefined/tree/maybe-bad Thanks!

kalbert312 · 2019-09-09T16:23:33Z

...though that's extremely confusing.

alexander-akait · 2019-09-09T16:25:12Z

I think we should output better error for this case

kalbert312 · 2019-09-09T18:14:49Z

I was focusing on the JS imports instead of the CSS import. Looks like adding the sideEffects: false fixed the JS import, but now the styles chunk is completely missing from the dist. Going to see if I can run two builds to work around it.

kalbert312 · 2019-09-09T20:39:13Z

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();
		/******/ })

alexander-akait · 2019-09-10T09:56:32Z

@kalbert312 it is in my todo list, look on this in near future (today/tomorrow)

alexander-akait · 2019-09-16T13:33:13Z

You should not use sideEffects: false, because css is sideEffects always

alexander-akait · 2019-09-16T13:35:45Z

I can't reproduce, what is branch i should use?

kalbert312 · 2019-09-17T14:30:56Z

bad and maybe-bad branches have bad bundles (importing the JS bundle elsewhere should result in undefined).

ianks · 2019-10-30T03:30:04Z

i believe we may be experiencing a similar issue. however, if we set maxInitialChunks: Infinity. does that happen with your build @kalbert312 ?

giuseppeg · 2019-12-12T11:40:22Z

I am experiencing the same issue and the setup is the one from @kalbert312's testcase.
@evilebottnawi can I help in any way?

tylerexmg · 2019-12-13T15:35:08Z

#408 (comment)

I have just observed this exact issue in my project and its lead me into a dead-end trying to split css. Hopefully it gets fixed soon.

yazonnile · 2019-12-26T22:56:45Z

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>

Sellec · 2020-02-21T12:52:15Z

Have the same issue - i need to extract vue's components styles into one single css file and got two js files - bug "bundle.js" file and little (window[jsonp]) "0.bundle.js" file. Its annoying.

Sellec · 2020-02-21T13:17:44Z

setting the splitchunks.cacheGroups.[chunkname].name='main' solves the problem with additional little file.

        splitChunks: {
            cacheGroups: {
                extractedCSS: {
                    test: (module, chunks) => module.constructor.name === 'CssModule',
                    name: "main",
                    chunks: "all",
                    enforce: true
                }
            }
        }

rwieruch · 2020-12-20T16:52:41Z

Has someone been able to fix this problem? I got the same issue with Webpack 4 where I activate splitChunks and get undefined for my imports.

sean-au · 2021-01-27T10:17:38Z

I still have the problem :(

jkarttunen · 2021-08-17T08:07:34Z

For me, it's a 600kb js file, consisting of only CSS classnames

alexander-akait · 2021-09-06T17:36:11Z

Should be solved, only one problem is empty JS files, but it should be fixed in webpack itself webpack/webpack#11671, if anybody will faced the the problem feel free to feedback and I will help

bturner1273 · 2022-03-04T17:08:43Z

my split chunks css bundling issue example
I have a 'good' branch that doesn't include optimizations.splitChunks.chunks = 'all' and a 'bad' branch that does. The bad branch will not umd export to my client-side js correctly for whatever reason. I tried using MiniCssExtractPlugin to no avail

ocean90 mentioned this issue Jun 2, 2020

importing style.(c/sc)ss with @wordpress/scripts 10.0 causes JavaScript to stop running? WordPress/gutenberg#22776

Closed

ik9999 mentioned this issue Sep 10, 2020

Concatenating multiple css files breaks js file #582

Closed

alexander-akait closed this as completed Sep 6, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

adding splitChunks all is breaking the module exports #408

adding splitChunks all is breaking the module exports #408

varenya commented Jun 11, 2019

alexander-akait commented Jun 11, 2019

varenya commented Jun 12, 2019

varenya commented Jun 12, 2019

varenya commented Jun 15, 2019

alexander-akait commented Jul 16, 2019

kalbert312 commented Sep 9, 2019

alexander-akait commented Sep 9, 2019

kalbert312 commented Sep 9, 2019 •

edited

Loading

alexander-akait commented Sep 9, 2019

kalbert312 commented Sep 9, 2019 •

edited

Loading

kalbert312 commented Sep 9, 2019

alexander-akait commented Sep 9, 2019

kalbert312 commented Sep 9, 2019

kalbert312 commented Sep 9, 2019

alexander-akait commented Sep 10, 2019

alexander-akait commented Sep 16, 2019

alexander-akait commented Sep 16, 2019

kalbert312 commented Sep 17, 2019 •

edited

Loading

ianks commented Oct 30, 2019

giuseppeg commented Dec 12, 2019

tylerexmg commented Dec 13, 2019 •

edited

Loading

yazonnile commented Dec 26, 2019 •

edited

Loading

Sellec commented Feb 21, 2020

Sellec commented Feb 21, 2020

rwieruch commented Dec 20, 2020

sean-au commented Jan 27, 2021

jkarttunen commented Aug 17, 2021

alexander-akait commented Sep 6, 2021

bturner1273 commented Mar 4, 2022

adding splitChunks all is breaking the module exports #408

adding splitChunks all is breaking the module exports #408

Comments

varenya commented Jun 11, 2019

Expected Behavior

Actual Behavior

Code

How Do We Reproduce?

alexander-akait commented Jun 11, 2019

varenya commented Jun 12, 2019

varenya commented Jun 12, 2019

varenya commented Jun 15, 2019

alexander-akait commented Jul 16, 2019

kalbert312 commented Sep 9, 2019

alexander-akait commented Sep 9, 2019

kalbert312 commented Sep 9, 2019 • edited Loading

alexander-akait commented Sep 9, 2019

kalbert312 commented Sep 9, 2019 • edited Loading

kalbert312 commented Sep 9, 2019

alexander-akait commented Sep 9, 2019

kalbert312 commented Sep 9, 2019

kalbert312 commented Sep 9, 2019

alexander-akait commented Sep 10, 2019

alexander-akait commented Sep 16, 2019

alexander-akait commented Sep 16, 2019

kalbert312 commented Sep 17, 2019 • edited Loading

ianks commented Oct 30, 2019

giuseppeg commented Dec 12, 2019

tylerexmg commented Dec 13, 2019 • edited Loading

yazonnile commented Dec 26, 2019 • edited Loading

was

now

Sellec commented Feb 21, 2020

Sellec commented Feb 21, 2020

rwieruch commented Dec 20, 2020

sean-au commented Jan 27, 2021

jkarttunen commented Aug 17, 2021

alexander-akait commented Sep 6, 2021

bturner1273 commented Mar 4, 2022

kalbert312 commented Sep 9, 2019 •

edited

Loading

kalbert312 commented Sep 9, 2019 •

edited

Loading

kalbert312 commented Sep 17, 2019 •

edited

Loading

tylerexmg commented Dec 13, 2019 •

edited

Loading

yazonnile commented Dec 26, 2019 •

edited

Loading