TypeError: Cannot read property '__esModule' of undefined when I use /* webpackPrefetch: true */

[agawley]

Bug report

What is the current behavior?
I am building a React App on serverless framework. I use webpack to compile both client-side and server-side code with Loadable-Components to do codesplitting. Everything works fine until I try to add /* webpackPrefetch: true */ to any of the imports in my Loadables. When I do this, although everything still compiles fine, server code will hard crash when it tries to import my <App /> for the SSR.

TypeError: Cannot read property '__esModule' of undefined
    at /Users/alexgawley/code/serverless/tmp/loadable-repro/.webpack/service/src/servers/static.js:29310:34
    at Object.<anonymous> (/Users/alexgawley/code/serverless/tmp/loadable-repro/.webpack/service/src/servers/static.js:29312:12)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at /Users/alexgawley/code/serverless/tmp/loadable-repro/node_modules/serverless-offline/dist/lambda/handler-runner/in-process-runner/InProcessRunner.js:157:133
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async InProcessRunner.run (/Users/alexgawley/code/serverless/tmp/loadable-repro/node_modules/serverless-offline/dist/lambda/handler-runner/in-process-runner/InProcessRunner.js:157:9)

If I remove /* webpackPrefetch: true */ everything works fine again. I've looked at the compiled code in both cases and there seems to be an additional __webpack_require__ function call in the prefetch version of the code that takes the well-formed __webpack_exports__ and overwrites it with undefined.

With /* webpackPrefetch: true */

/******/ 	// module factories are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	var __webpack_exports__ = __webpack_require__("./src/servers/static.js");
/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ 	var __webpack_export_target__ = exports;
/******/ 	for(var i in __webpack_exports__) __webpack_export_target__[i] = __webpack_exports__[i];
/******/ 	if(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });
/******/ 	
/******/ })()

Without /* webpackPrefetch: true */

/******/ 	// module factories are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	var __webpack_exports__ = __webpack_require__("./src/servers/static.js");
/******/ 	var __webpack_export_target__ = exports;
/******/ 	for(var i in __webpack_exports__) __webpack_export_target__[i] = __webpack_exports__[i];
/******/ 	if(__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, "__esModule", { value: true });
/******/ 	
/******/ })()

Here's the definition of .O

(() => {
/******/ 		var deferred = [];
/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ 			if(chunkIds) {
/******/ 				priority = priority || 0;
/******/ 				for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ 				deferred[i] = [chunkIds, fn, priority];
/******/ 				return;
/******/ 			}
/******/ 			var notFulfilled = Infinity;
/******/ 			for (var i = 0; i < deferred.length; i++) {
/******/ 				var [chunkIds, fn, priority] = deferred[i];
/******/ 				var fulfilled = true;
/******/ 				for (var j = 0; j < chunkIds.length; j++) {
/******/ 					if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ 						chunkIds.splice(j--, 1);
/******/ 					} else {
/******/ 						fulfilled = false;
/******/ 						if(priority < notFulfilled) notFulfilled = priority;
/******/ 					}
/******/ 				}
/******/ 				if(fulfilled) {
/******/ 					deferred.splice(i--, 1)
/******/ 					result = fn();
/******/ 				}
/******/ 			}
/******/ 			return result;
/******/ 		};
/******/ 	})();

If the current behavior is a bug, please provide the steps to reproduce.

git clone https://github.com/agawley/loadable-repro
npm i
npm run offline

load http://localhost:3000

Remove /* webpackPrefetch: true */ from src/client/app.js for everything to work fine.

What is the expected behavior?

I shouldn't get this error. My understanding is that adding /* webpackPrefetch: true */ should "just work".

Other relevant information:
webpack version: 5.16.0
Node.js version: 12.22.1
Operating System: macOS 10.15.7
Additional tools: See package.json in https://github.com/agawley/loadable-repro

[webpack-bot]

For maintainers only:

• webpack-4
• webpack-5
• bug
• critical-bug
• enhancement
• documentation
• performance
• dependencies
• question

[alexander-akait]

Duplicate #12993, you can check it using patch from #13431

[agawley]

Thanks @alexander-akait. Patch confirms this is the issue.