Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork9.2k
Description
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:455Uncaught 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.jsFull file contents available in the linked repository, but for convenience I'll show some excerpts here.
There are two packages in this monorepo:web andlib.
libis a library that exports one function, leftPad.webis a webpage thatconsole.log()a left-padded hello world.
packages/lib/webpack.config.js:
constpath=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:
constpath=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 libgets imported, so I've given it apackage.json- all dependencies are hoisted to root-level
- the only dependency is webpack so this doesn't really matter
webdepends onlibvia@my-cool-project/libwebhas a package-local node_modules with a symlink@my-cool-project/libthat leads to thelibfolder- 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 toolchainnpm i# build libcd packages/libnode ../../node_modules/.bin/webpack# run the websitecd ../webnode ../../node_modules/.bin/webpack-dev-server
Navigate tohttp://localhost:8080
In Firefox 80.0b3, you should expect to see the following error whenweb attempts to importlib:
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:532In 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 tohttp://localhost:8080 should output the following message to the console:
hello worldI 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 amongits 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