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




<p dir="auto"><strong>What is the current behavior?</strong><br>
After upgrade to Webpack@5, in development mode with HMR, module resolution fails for indirect dependencies via webpack-bundled libraries.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Here is the repo with minimal reproduction of the issue: <a href="https://github.com/birdofpreyru/webpack5-bug1">https://github.com/birdofpreyru/webpack5-bug1</a></p>
<ol dir="auto">
<li>
<p dir="auto">Clone it, and build the mock library</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ git clone https://github.com/birdofpreyru/webpack5-bug1.git
$ cd webpack5-bug1/lib
$ npm install
$ npm run build
$ npm pack"><pre class="notranslate"><code class="notranslate">$ git clone https://github.com/birdofpreyru/webpack5-bug1.git
$ cd webpack5-bug1/lib
$ npm install
$ npm run build
$ npm pack
</code></pre></div>
<p dir="auto">The mock library just imports <code class="notranslate">lodash</code> library and prints its version (can be any other import and use of NPM module - that's does not matter).</p>
</li>
<li>
<p dir="auto">Go to the host code, and run it (the bundle is served using <code class="notranslate">HtmlWebpackPlugin</code> and <code class="notranslate">webpack-dev-server</code>), using the mock library from (1):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ cd ../host
$ npm install
$ npm install ../lib/lib-1.0.0.tgz
$ npm start"><pre class="notranslate"><code class="notranslate">$ cd ../host
$ npm install
$ npm install ../lib/lib-1.0.0.tgz
$ npm start
</code></pre></div>
</li>
<li>
<p dir="auto">In browser go to <code class="notranslate">localhost:8080</code>, and look into the console:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main.js:2)
at eval (index.js:1)
at Object../index.js (main.js:2)
at __nested_webpack_require_562843__ (main.js:2)
at main.js:2
at factory (main.js:2)
at Object.823 (main.js:2)
at __webpack_require__ (main.js:2)
at main.js:2
at main.js:2"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main.js:2)
at eval (index.js:1)
at Object../index.js (main.js:2)
at __nested_webpack_require_562843__ (main.js:2)
at main.js:2
at factory (main.js:2)
at Object.823 (main.js:2)
at __webpack_require__ (main.js:2)
at main.js:2
at main.js:2
</code></pre></div>
<p dir="auto">it fails inside the webpack require function during request for <code class="notranslate">lodash</code> at the line</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);"><pre class="notranslate"><code class="notranslate">__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);
</code></pre></div>
<p dir="auto">It looks like that <code class="notranslate">__webpack_modules__</code> is the map of modules which are direct dependencies of <code class="notranslate">host</code> code, while <code class="notranslate">lodash</code> module lives inside <code class="notranslate">__webpack_modules__</code> map bundled into the mock library. The same error happens if <code class="notranslate">lodash</code> is declared as external dependency of the mock library.</p>
<p dir="auto">At the same time it all works fine if everything is bundled for production and served without dev server.</p>
</li>
</ol>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
Module resolution must not fail. In this specific example <code class="notranslate">lodash</code> should be resolved, and you should see in the console debug messages printed by the library and by the host code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="LODASH: 4.17.20
Hello World!"><pre class="notranslate"><code class="notranslate">LODASH: 4.17.20
Hello World!
</code></pre></div>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.1.3<br>
Node.js version: 12.19.0<br>
Operating System: Ubuntu 20.04.1<br>
Additional tools: none</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto"><code class="notranslate">__webpack_require__</code> goes bang attempting to import a library local to our project (i.e. a sibling package in the same lerna monorepo).</p>
<p dir="auto">We did not experience this problem in webpack 4.25.1, but we do experience the problem in webpack 5.0.0-beta.23.</p>
<p dir="auto">Depending on how modern your browser is, you will encounter one of the following error messages:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: __webpack_modules__[moduleId] is undefined
    __webpack_require__ http://localhost:8080/main.js:455"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: __webpack_modules__[moduleId] is undefined
    __webpack_require__ http://localhost:8080/main.js:455
</code></pre></div>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main.js:455)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main.js:455)
</code></pre></div>
<p dir="auto">You'll recognise the latter from existing issues such as <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="280373463" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/6094" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/6094/hovercard" href="https://github.com/webpack/webpack/issues/6094">#6094</a>. I think what I've found is just one of many ways to encounter this problem. I tried a lot of existing suggestions, but to no avail. Fortunately we have a repro this time. <g-emoji class="g-emoji" alias="slightly_smiling_face" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f642.png">🙂</g-emoji></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<p dir="auto">Minimal repro repository here:<br>
<a href="https://github.com/Birch-san/webpack-repro">https://github.com/Birch-san/webpack-repro</a></p>
<p dir="auto">Repository layout (<code class="notranslate">*</code> indicates a file output by build/installation):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  webpack-repro
* ├── node_modules
  ├── README.md
  ├── package-lock.json
  ├── package.json
  └── packages
      ├── lib
*     │   ├── dist
*     │   │   └── main.js
      │   ├── package.json
      │   ├── src
      │   │   ├── index.js
      │   │   └── utils.js
      │   └── webpack.config.js
      └── web
          ├── dist
          │   ├── index.html
*         │   └── main.js
          ├── node_modules
          │   └── @my-cool-project
          │       └── lib -&gt; ../../../lib
          ├── src
          │   └── index.js
          └── webpack.config.js"><pre class="notranslate"><code class="notranslate">  webpack-repro
* ├── node_modules
  ├── README.md
  ├── package-lock.json
  ├── package.json
  └── packages
      ├── lib
*     │   ├── dist
*     │   │   └── main.js
      │   ├── package.json
      │   ├── src
      │   │   ├── index.js
      │   │   └── utils.js
      │   └── webpack.config.js
      └── web
          ├── dist
          │   ├── index.html
*         │   └── main.js
          ├── node_modules
          │   └── @my-cool-project
          │       └── lib -&gt; ../../../lib
          ├── src
          │   └── index.js
          └── webpack.config.js
</code></pre></div>
<p dir="auto">Full file contents available in the linked repository, but for convenience I'll show some excerpts here.</p>
<p dir="auto">There are two packages in this monorepo: <code class="notranslate">web</code> and <code class="notranslate">lib</code>.</p>
<ul dir="auto">
<li><code class="notranslate">lib</code> is a library that exports one function, leftPad.</li>
<li><code class="notranslate">web</code> is a webpage that <code class="notranslate">console.log()</code> a left-padded hello world.</li>
</ul>
<p dir="auto"><code class="notranslate">packages/lib/webpack.config.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    library: 'lib',
    libraryTarget: 'umd'
  },
  mode: 'development'
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'src/index.js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'dist'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">library</span>: <span class="pl-s">'lib'</span><span class="pl-kos">,</span>
    <span class="pl-c1">libraryTarget</span>: <span class="pl-s">'umd'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">mode</span>: <span class="pl-s">'development'</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><code class="notranslate">packages/web/webpack.config.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: '[name].js',
    publicPath: '/'
  },
  devServer: {
    contentBase: './dist'
  },
  mode: 'development',
  watch: true
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-s">'src/index.js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">publicPath</span>: <span class="pl-s">'/'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">devServer</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">contentBase</span>: <span class="pl-s">'./dist'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">mode</span>: <span class="pl-s">'development'</span><span class="pl-kos">,</span>
  <span class="pl-c1">watch</span>: <span class="pl-c1">true</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><code class="notranslate">packages/web/src/index.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { leftPad } from '@my-cool-project/lib'
console.log(leftPad('hello world', 20));"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-s1">leftPad</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'@my-cool-project/lib'</span>
<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">leftPad</span><span class="pl-kos">(</span><span class="pl-s">'hello world'</span><span class="pl-kos">,</span> <span class="pl-c1">20</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I've tried to replicate the important behaviours of a lerna monorepo in a minimalist way.</p>
<ul dir="auto">
<li>every package has its own directory inside <code class="notranslate">packages</code></li>
<li><code class="notranslate">lib</code> gets imported, so I've given it a <code class="notranslate">package.json</code></li>
<li>all dependencies are hoisted to root-level
<ul dir="auto">
<li>the only dependency is webpack so this doesn't really matter</li>
</ul>
</li>
<li><code class="notranslate">web</code> depends on <code class="notranslate">lib</code> via <code class="notranslate">@my-cool-project/lib</code>
<ul dir="auto">
<li><code class="notranslate">web</code> has a package-local node_modules with a symlink <code class="notranslate">@my-cool-project/lib</code> that leads to the <code class="notranslate">lib</code> folder</li>
<li><em>it'd be more realistic if I'd hoisted this symlink to root-level, but making it package-local was an easy way to prevent its being clobbered by the npm install</em></li>
</ul>
</li>
</ul>
<p dir="auto">Setup instructions:</p>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="# root-level npm install. our only dependencies are the webpack toolchain
npm i
# build lib
cd packages/lib
node ../../node_modules/.bin/webpack
# run the website
cd ../web
node ../../node_modules/.bin/webpack-dev-server"><pre class="notranslate"><span class="pl-c"><span class="pl-c">#</span> root-level npm install. our only dependencies are the webpack toolchain</span>
npm i
<span class="pl-c"><span class="pl-c">#</span> build lib</span>
<span class="pl-c1">cd</span> packages/lib
node ../../node_modules/.bin/webpack
<span class="pl-c"><span class="pl-c">#</span> run the website</span>
<span class="pl-c1">cd</span> ../web
node ../../node_modules/.bin/webpack-dev-server</pre></div>
<p dir="auto">Navigate to <a href="http://localhost:8080" rel="nofollow">http://localhost:8080</a></p>
<p dir="auto">In Firefox 80.0b3, you should expect to see the following error when <code class="notranslate">web</code> attempts to import <code class="notranslate">lib</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: __webpack_modules__[moduleId] is undefined
    __webpack_require__ http://localhost:8080/main.js:455
    &lt;anonymous&gt; webpack://lib/./src/index.js?:5
    js webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:28
    __nested_webpack_require_3026__ webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:65
    &lt;anonymous&gt; webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:104
    &lt;anonymous&gt; webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:105
    webpackUniversalModuleDefinition webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:11
    &lt;anonymous&gt; webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:13
    node_modules my-cool-project/lib/dist/main.js@http://localhost:8080/main.js:418
    __webpack_require__ http://localhost:8080/main.js:455
    &lt;anonymous&gt; webpack:///./src/index.js?:2
    js http://localhost:8080/main.js:432
    __webpack_require__ http://localhost:8080/main.js:455
    &lt;anonymous&gt; http://localhost:8080/main.js:529
    &lt;anonymous&gt; http://localhost:8080/main.js:532"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: __webpack_modules__[moduleId] is undefined
    __webpack_require__ http://localhost:8080/main.js:455
    &lt;anonymous&gt; webpack://lib/./src/index.js?:5
    js webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:28
    __nested_webpack_require_3026__ webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:65
    &lt;anonymous&gt; webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:104
    &lt;anonymous&gt; webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:105
    webpackUniversalModuleDefinition webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:11
    &lt;anonymous&gt; webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:13
    node_modules my-cool-project/lib/dist/main.js@http://localhost:8080/main.js:418
    __webpack_require__ http://localhost:8080/main.js:455
    &lt;anonymous&gt; webpack:///./src/index.js?:2
    js http://localhost:8080/main.js:432
    __webpack_require__ http://localhost:8080/main.js:455
    &lt;anonymous&gt; http://localhost:8080/main.js:529
    &lt;anonymous&gt; http://localhost:8080/main.js:532
</code></pre></div>
<p dir="auto">In Chrome 84, you'll get a slightly vaguer message:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main.js:455)
    at eval (index.js:5)
    at Object../src/index.js (main.js:28)
    at __nested_webpack_require_3026__ (main.js:65)
    at eval (main.js:104)
    at eval (main.js:105)
    at webpackUniversalModuleDefinition (main.js:11)
    at eval (main.js:13)
    at Object../node_modules/@my-cool-project/lib/dist/main.js (main.js:418)
    at __webpack_require__ (main.js:455)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (main.js:455)
    at eval (index.js:5)
    at Object../src/index.js (main.js:28)
    at __nested_webpack_require_3026__ (main.js:65)
    at eval (main.js:104)
    at eval (main.js:105)
    at webpackUniversalModuleDefinition (main.js:11)
    at eval (main.js:13)
    at Object../node_modules/@my-cool-project/lib/dist/main.js (main.js:418)
    at __webpack_require__ (main.js:455)
</code></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Navigating to <a href="http://localhost:8080" rel="nofollow">http://localhost:8080</a> should output the following message to the console:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="         hello world"><pre class="notranslate"><code class="notranslate">         hello world
</code></pre></div>
<p dir="auto">I think this may be to do with module federation? <code class="notranslate">lib</code> fails to find its own module, <code class="notranslate">./src/utils.js</code>. I think it's looking in the wrong place; it needs to look among <em>its own modules</em>, but it's looking for them in the top-level <code class="notranslate">__webpack_modules__</code>.</p>
<p dir="auto">Thanks for any assistance you can provide! <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji></p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version: 5.0.0-beta.23<br>
Node.js version: v12.12.0<br>
Operating System: macOS Mojave 10.14.6</p>