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