Issue 1:
Bug report

What is the current behavior?

After upgrade to Webpack@5, in development mode with HMR, module resolution fails for indirect dependencies via webpack-bundled libraries.

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

Here is the repo with minimal reproduction of the issue: https://github.com/birdofpreyru/webpack5-bug1

Clone it, and build the mock library

$ git clone https://github.com/birdofpreyru/webpack5-bug1.git
$ cd webpack5-bug1/lib
$ npm install
$ npm run build
$ npm pack

The mock library just imports lodash library and prints its version (can be any other import and use of NPM module - that's does not matter).

Go to the host code, and run it (the bundle is served using HtmlWebpackPlugin and webpack-dev-server), using the mock library from (1):

$ cd ../host
$ npm install
$ npm install ../lib/lib-1.0.0.tgz
$ npm start

In browser go to localhost:8080, and look into the console:

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

it fails inside the webpack require function during request for lodash at the line

__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);

It looks like that __webpack_modules__ is the map of modules which are direct dependencies of host code, while lodash module lives inside __webpack_modules__ map bundled into the mock library. The same error happens if lodash is declared as external dependency of the mock library.

At the same time it all works fine if everything is bundled for production and served without dev server.

What is the expected behavior?

Module resolution must not fail. In this specific example lodash should be resolved, and you should see in the console debug messages printed by the library and by the host code:

LODASH: 4.17.20
Hello World!

Other relevant information:

webpack version: 5.1.3

Node.js version: 12.19.0

Operating System: Ubuntu 20.04.1

Additional tools: none

Issue 2:
Bug report

What is the current behavior?

__webpack_require__ goes bang attempting to import a library local to our project (i.e. a sibling package in the same lerna monorepo).

We did not experience this problem in webpack 4.25.1, but we do experience the problem in webpack 5.0.0-beta.23.

Depending on how modern your browser is, you will encounter one of the following error messages:

Uncaught TypeError: __webpack_modules__[moduleId] is undefined
__webpack_require__ http://localhost:8080/main.js:455

Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (main.js:455)

You'll recognise the latter from existing issues such as #6094. 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. 🙂

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

Minimal repro repository here:

https://github.com/Birch-san/webpack-repro

Repository layout (* indicates a file output by build/installation):

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 -> ../../../lib
├── src
│ └── index.js
└── webpack.config.js

Full file contents available in the linked repository, but for convenience I'll show some excerpts here.

There are two packages in this monorepo: web and lib.

lib is a library that exports one function, leftPad.

web is a webpage that console.log() a left-padded hello world.

packages/lib/webpack.config.js:

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'
};

packages/web/webpack.config.js:

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
};

packages/web/src/index.js:

import { leftPad } from '@my-cool-project/lib'
console.log(leftPad('hello world', 20));

I've tried to replicate the important behaviours of a lerna monorepo in a minimalist way.

every package has its own directory inside packages

lib gets imported, so I've given it a package.json

all dependencies are hoisted to root-level

the only dependency is webpack so this doesn't really matter

web depends on lib via @my-cool-project/lib

web has a package-local node_modules with a symlink @my-cool-project/lib that leads to the lib folder

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

Setup instructions:

# 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

Navigate to http://localhost:8080

In Firefox 80.0b3, you should expect to see the following error when web attempts to import lib:

Uncaught TypeError: __webpack_modules__[moduleId] is undefined
__webpack_require__ http://localhost:8080/main.js:455
<anonymous> 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
<anonymous> webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:104
<anonymous> webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:105
webpackUniversalModuleDefinition webpack:///./node_modules/@my-cool-project/lib/dist/main.js?:11
<anonymous> 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
<anonymous> webpack:///./src/index.js?:2
js http://localhost:8080/main.js:432
__webpack_require__ http://localhost:8080/main.js:455
<anonymous> http://localhost:8080/main.js:529
<anonymous> http://localhost:8080/main.js:532

In Chrome 84, you'll get a slightly vaguer message:

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)

What is the expected behavior?

Navigating to http://localhost:8080 should output the following message to the console:

hello world

I think this may be to do with module federation? lib fails to find its own module, ./src/utils.js. I think it's looking in the wrong place; it needs to look among its own modules, but it's looking for them in the top-level __webpack_modules__.

Thanks for any assistance you can provide! 😄

Other relevant information:

webpack version: 5.0.0-beta.23

Node.js version: v12.12.0

Operating System: macOS Mojave 10.14.6