webpack-dev-server: Dev server breaks library entry type

Bug report

We have an app with two entries - the main one for the app, and a second entry for a library. Both should be served up by the dev server, but the hot reloading breaks the library one.

Actual Behavior

Bottom of app entry file:

/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/whatwg-fetch/fetch.js"); })
/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/webpack-dev-server/client/index.js?protocol=wss&hostname=192.168.0.109&port=8081&pathname=%2Fws&logging=none&reconnect=10"); })
/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/webpack/hot/dev-server.js"); })
/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./src/main.js"); })
/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);

Bottom of library entry file:

/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/whatwg-fetch/fetch.js"); })
/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/webpack-dev-server/client/index.js?protocol=wss&hostname=192.168.0.109&port=8081&pathname=%2Fws&logging=none&reconnect=10"); })
/******/ 	__webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./node_modules/webpack/hot/dev-server.js"); })
/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["chunk-vendors"], function() { return __webpack_require__("./src/library.js"); })
/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ 	MyLibrary = __webpack_exports__;

The value for MyLibrary ends up being undefined.

Expected Behavior

MyLibrary should be the exported module, not undefined.

It does work in release mode, but not in dev mode when webpack-dev-server is in use.

How Do We Reproduce?

Create a project with multiple entries, one of which is a library (var output)
Run it in dev mode
Here’s an example reproduction: https://github.com/DanielStout5/WebpackLibraryHMRIssue

Please paste the results of `npx webpack-cli info` here, and mention other relevant information

System: OS: Windows 10 10.0.19044 CPU: (16) x64 11th Gen Intel® Core™ i7-11700F @ 2.50GHz Memory: 9.00 GB / 31.73 GB Binaries: Node: 14.18.1 - C:\Program Files\nodejs\node.EXE npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
Internet Explorer: 11.0.19041.1566 Packages: webpack-bundle-analyzer: 4.5.0 => 4.5.0 webpack-dev-server: 4.9.1 => 4.9.1

I’ve looked at:

https://github.com/webpack/webpack-dev-server/issues/2484 (says to upgrade to webpack-dev-server 4, which I’m above)
https://github.com/webpack/webpack-dev-server/issues/2692 (about module federation, not exactly what I’m doing - and this one is still open)
https://github.com/webpack/webpack/issues/12793 (Also says fixed in wds 4)

I don’t really care about having hot reloading for the library. If I could somehow disable that while keeping it for the main app, that would be acceptable.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 17 (8 by maintainers)

Commits related to this issue

Upgrade webpack setup This includes * `webpack` * `webpack-dev-server` * `webpack-cli` The current versions have a bug that don't correctly expose a library, if one is set: https://github.com/... — committed to abhchand/girder by abhchand 2 years ago

Most upvoted comments

@kamranayub appEntries is just a list of entrypoints I defined:

const appEntries = ["./src/main.js"];

Then I used them like so:

config.entry = () => {
      return {
        app: appEntries,
        tenant: { // alternate non-app config here },
      };
    };

My particular use case was in the context of a Vue CLI application, which does a bunch of webpack config by default that I needed to only apply conditionally which would probably be unnecessary for other use cases

DanielStout5 on Nov 21, 2023