<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
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 <code class="notranslate">/* webpackPrefetch: true */</code> 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 <code class="notranslate">&lt;App /&gt;</code> for the SSR.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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.&lt;anonymous&gt; (/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 (&lt;anonymous&gt;)
    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)"><pre class="notranslate"><code class="notranslate">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.&lt;anonymous&gt; (/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 (&lt;anonymous&gt;)
    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)
</code></pre></div>
<p dir="auto">If I remove  <code class="notranslate">/* webpackPrefetch: true */</code> everything works fine again. I've looked at the compiled code in both cases and there seems to be an additional <code class="notranslate">__webpack_require__</code> function call in the prefetch version of the code that takes the well-formed <code class="notranslate">__webpack_exports__</code> and overwrites it with <code class="notranslate">undefined</code>.</p>
<p dir="auto">With <code class="notranslate">/* webpackPrefetch: true */</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/******/ 	// module factories are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	var __webpack_exports__ = __webpack_require__(&quot;./src/servers/static.js&quot;);
/******/ 	__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__, &quot;__esModule&quot;, { value: true });
/******/ 	
/******/ })()"><pre class="notranslate"><code class="notranslate">/******/ 	// 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 });
/******/ 	
/******/ })()
</code></pre></div>
<p dir="auto">Without <code class="notranslate">/* webpackPrefetch: true */</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/******/ 	// module factories are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	var __webpack_exports__ = __webpack_require__(&quot;./src/servers/static.js&quot;);
/******/ 	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__, &quot;__esModule&quot;, { value: true });
/******/ 	
/******/ })()"><pre class="notranslate"><code class="notranslate">/******/ 	// 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 });
/******/ 	
/******/ })()
</code></pre></div>
<p dir="auto">Here's the definition of .O</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(() =&gt; {
/******/ 		var deferred = [];
/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) =&gt; {
/******/ 			if(chunkIds) {
/******/ 				priority = priority || 0;
/******/ 				for(var i = deferred.length; i &gt; 0 &amp;&amp; deferred[i - 1][2] &gt; priority; i--) deferred[i] = deferred[i - 1];
/******/ 				deferred[i] = [chunkIds, fn, priority];
/******/ 				return;
/******/ 			}
/******/ 			var notFulfilled = Infinity;
/******/ 			for (var i = 0; i &lt; deferred.length; i++) {
/******/ 				var [chunkIds, fn, priority] = deferred[i];
/******/ 				var fulfilled = true;
/******/ 				for (var j = 0; j &lt; chunkIds.length; j++) {
/******/ 					if ((priority &amp; 1 === 0 || notFulfilled &gt;= priority) &amp;&amp; Object.keys(__webpack_require__.O).every((key) =&gt; (__webpack_require__.O[key](chunkIds[j])))) {
/******/ 						chunkIds.splice(j--, 1);
/******/ 					} else {
/******/ 						fulfilled = false;
/******/ 						if(priority &lt; notFulfilled) notFulfilled = priority;
/******/ 					}
/******/ 				}
/******/ 				if(fulfilled) {
/******/ 					deferred.splice(i--, 1)
/******/ 					result = fn();
/******/ 				}
/******/ 			}
/******/ 			return result;
/******/ 		};
/******/ 	})();"><pre class="notranslate"><code class="notranslate">(() =&gt; {
/******/ 		var deferred = [];
/******/ 		__webpack_require__.O = (result, chunkIds, fn, priority) =&gt; {
/******/ 			if(chunkIds) {
/******/ 				priority = priority || 0;
/******/ 				for(var i = deferred.length; i &gt; 0 &amp;&amp; deferred[i - 1][2] &gt; priority; i--) deferred[i] = deferred[i - 1];
/******/ 				deferred[i] = [chunkIds, fn, priority];
/******/ 				return;
/******/ 			}
/******/ 			var notFulfilled = Infinity;
/******/ 			for (var i = 0; i &lt; deferred.length; i++) {
/******/ 				var [chunkIds, fn, priority] = deferred[i];
/******/ 				var fulfilled = true;
/******/ 				for (var j = 0; j &lt; chunkIds.length; j++) {
/******/ 					if ((priority &amp; 1 === 0 || notFulfilled &gt;= priority) &amp;&amp; Object.keys(__webpack_require__.O).every((key) =&gt; (__webpack_require__.O[key](chunkIds[j])))) {
/******/ 						chunkIds.splice(j--, 1);
/******/ 					} else {
/******/ 						fulfilled = false;
/******/ 						if(priority &lt; notFulfilled) notFulfilled = priority;
/******/ 					}
/******/ 				}
/******/ 				if(fulfilled) {
/******/ 					deferred.splice(i--, 1)
/******/ 					result = fn();
/******/ 				}
/******/ 			}
/******/ 			return result;
/******/ 		};
/******/ 	})();
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="git clone https://github.com/agawley/loadable-repro
npm i
npm run offline"><pre class="notranslate"><code class="notranslate">git clone https://github.com/agawley/loadable-repro
npm i
npm run offline
</code></pre></div>
<p dir="auto">load <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a></p>
<p dir="auto">Remove <code class="notranslate">/* webpackPrefetch: true */</code> from src/client/app.js for everything to work fine.</p>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">I shouldn't get this error. My understanding is that adding <code class="notranslate">/* webpackPrefetch: true */</code> should "just work".</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.16.0<br>
Node.js version: 12.22.1<br>
Operating System: macOS 10.15.7<br>
Additional tools: See package.json in <a href="https://github.com/agawley/loadable-repro">https://github.com/agawley/loadable-repro</a></p>
<p dir="auto">So, as you may already know, with npm@3 (on the registry now, currently in beta), peerDependencies are no longer installed for you. They act as assertions, warning you if you don't meet their requirements, but they do not break the install nor do they trigger installation of the thing mentioned.</p>
<p dir="auto">This means that <code class="notranslate">npm install -g webpack</code> will not result in a working install out of the box as <code class="notranslate">node-libs-browser</code> won't be installed.</p>
<p dir="auto">I'd like to work with you all to figure out what the best solution is for this. My first reaction would be to just make <code class="notranslate">node-libs-browser</code> a regular dependency. Is there a reason not to do that?</p>