Module exports are not preserved when using dev-server with Webpack 5 beta #2484

csvn · 2020-03-26T00:19:20Z

Operating System: Windows 10
Node Version: v13.10.0
NPM Version: 6.13.7
webpack Version: 5.0.0-beta.14
webpack-dev-server Version: 3.10.13
Browser: Chrome v82

This is a bug
This is a modification request

Code

Reproduction link: https://github.com/csvn/webpack-dev-server-export-issue-reproduction

// webpack.config.js
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    ecmaVersion: 2015,
    library: 'main',
    libraryTarget: 'window'
  },
  devServer: {
    port: 3001,
    contentBase: require('path').join(__dirname, 'public'),
    open: false
  }
};

// src/main.js
export const greeting = 'Hello World!';

Additional details

The entry point is messed up when when running webpack-dev-server. The exports will always be empty ({}) due to webpack-dev-server prepending it's entry points, which does not seem to yield the correct results with Webpack 5 beta.

When using `webpack-dev-server`

/******/ 	// Load entry module and return exports
/******/ 	__webpack_require__("./src/main.js");
/******/ 	return __webpack_require__("./node_modules/webpack-dev-server/client/index.js?http://localhost:3001");

When using `webpack` build

/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__("./src/main.js");

Expected Behavior

Values exported from main.js should be available on window.main.

Actual Behavior

The exported object on window.main is {}

How can we reproduce the behavior?

Clone the repo from the link above
Run npm start (or npx webpack-dev-server
Open http://localhost:3001
There are error in console due to export from main.js missing

The text was updated successfully, but these errors were encountered:

alexander-akait · 2020-03-26T11:46:31Z

Pr welcome

hmnd · 2020-07-08T00:38:15Z

A workaround for now at least is to set config.devServer.injectClient: false; this prevents dev-server from prepending its entry.

alexander-akait · 2020-07-13T12:25:37Z

/cc @Loonride Can you look at this?

knagaitsev · 2020-07-13T16:06:45Z

/cc @Loonride Can you look at this?

I will take a look

kamilic · 2020-10-14T05:15:01Z

this problem still existed on webpack@5.1.0.

sprilukin · 2020-10-30T16:48:19Z

this problem is still present in webpack@5.3.2

sprilukin · 2020-11-01T17:09:09Z

I still want liveReloading capability during developing of my library so i found a workaround.
original webpack config:

const config = (env, args) => {
    ...
    entry: './src/myLibrary'
    ...
}

modified webpack config:

const config = (env, args) => {
    const {devServer = false} = env;
    ...
    entry: devServer ? ['webpack-dev-server/client', './src/myLibrary'] : './src/myLibrary'
    devServer: {
       ...
       injectClient: false
    }
}

and run dev server as npx webpack serve --env devServer

works fine despite the fact that correct injection of the dev server client should be the following:
webpack-dev-server/client?http://<webpackConfig.devServer.host>:<webpackConfig.devServer.port>

But i'm looking forward to see this issue fixed.

erikwatson · 2020-11-14T13:03:21Z

This is still an issue for me.

"devDependencies": {
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
}

ylemkimon · 2020-11-16T17:50:33Z

Duplicate of #2692 (it's a newer issue, but has more details).

alexander-akait · 2020-11-17T11:36:24Z

@ylemkimon yep, but it is different issues, but have the same origin

alexander-akait · 2020-11-19T16:38:42Z

@ylemkimon just check, do we have test for:

Webpack module federation breaks with multiple entrypoints #2692
and for this

ylemkimon · 2020-11-20T05:30:14Z

@evilebottnawi 😄

webpack-dev-server/test/integration/ModuleFederation.test.js

Lines 27 to 53 in e647af4

    
           it('should use the last entry export', async () => { 
        
             const { text, statusCode } = await req.get('/main.js'); 
        
             expect(statusCode).toEqual(200); 
        
             expect(text).toContain('entry1'); 
        
             let exports; 
        
             expect(() => { 
        
               exports = requireFromString(text); 
        
             }).not.toThrow(); 
        
             expect(exports).toEqual('entry2'); 
        
           }); 
        
           if (title === 'object multi-entry config') { 
        
             it('should support the named entry export', async () => { 
        
               const { text, statusCode } = await req.get('/foo.js'); 
        
               expect(statusCode).toEqual(200); 
        
               expect(text).not.toContain('entry2'); 
        
               let exports; 
        
               expect(() => { 
        
                 exports = requireFromString(text); 
        
               }).not.toThrow(); 
        
               expect(exports).toEqual('entry1'); 
        
             }); 
        
           }

alexander-akait · 2020-11-20T11:20:33Z

@ylemkimon good, for library?

ylemkimon · 2020-11-20T11:39:32Z

@evilebottnawi It tests for libraryTarget: 'umd':

webpack-dev-server/test/fixtures/module-federation-config/webpack.config.js

Line 10 in 1aa0d2d

libraryTarget: 'umd',

alexander-akait · 2020-11-20T11:41:10Z

@ylemkimon I mean testing libraryTarget without module federation, sorry for misleading

Integrated functionality with Geonames, Weatherbit, and Pixabay APIs. -Geonames takes in the city name and responds with a list of places. The App will chose the first option. -Weatherbit will get historical weather data for the longitude and latitude provided from Geonames because it doesn't serve predictions too far out. Since the Weatherbit account is on the free version, it needs to call the API 7 times for a weeks worth of historical data. -Pixabay takes in the city and responds with an image for that location. As for the WebPack bug, there is an issue with wp5, webpack-dev-server and hot module replacement. Essentially it causes the library to empty, not allowing access to imported functions. The issue is found here: webpack/webpack-dev-server#2484 and offers a fix setting config.devServer.injectClient: false. This ends up disabling hot reload it seems but I can access the library and reload the page manually to see changes. I also added miscellaneous style changes as well as a countdown in days for the trips.

cyulin · 2020-12-22T07:26:36Z

this problem is still present in webpack@5.10.3

Compatability issues with Webpack 5 were giving us an empty object for traceSearch when the test page was served via the dev server. See webpack/webpack-dev-server#2484

Mustang-Galaxy · 2021-03-11T09:18:50Z

webpack-dev-server@4.0.0-beta.0 is work

…没有导出方法 issue:webpack/webpack-dev-server#2484

nicmosc · 2021-03-31T06:51:18Z

This doesn't seem to be fully fixed. While upgrading to webpack-dev-server@4 fixes the library export problem, it completely breaks hot reload (unless someone has managed to find a configuration that works, i'm still looking...) and also doesn't support Fast Reload since those plugins are still only supporting up to version 3.

For reference, here's the config i have for version 4 which still doesn't provide hot reload (i.e. the whole page refreshes every time a change occurs)

config.devServer = {
    historyApiFallback: true,
    host: '0.0.0.0',
    port: WEBPACK_PORT,
    liveReload: true,
    injectClient: true,
    client: {
      logging: 'none',
      progress: false,
      overlay: false,
      host: '0.0.0.0',
      port: WEBPACK_PORT,
    },
    static: [path.join(__dirname, '/'), path.join(__dirname, 'node_modules')],
  };
  config.infrastructureLogging = {
    level: 'none',
  };
  config.stats = 'errors-only';

Using @ncastaldo 's fix the library object is correctly exposed, however only if i disable the hot and inline options in the dev server, which again, removes hot reload. If i enable them, hot reload works, but the library is not exposed correctly anymore.

So essentially right now it's impossible to have a correctly exposed library with hot reload, since in version 3 hot reload works, but the library cannot be exposed properly, and in version 4, it's exposed properly but hot reload is broken...

Anyone else still encountering this?

alexander-akait · 2021-03-31T11:20:54Z

remove client.host, you should not touch this option if you don't use proxy server above dev, i.e. nginx -> dev server

bturner1273 · 2021-04-06T18:18:08Z

still an issue for me as well in webpack 5.28.0 with dev-server 4.0.0-beta.1 and cli 4.6.0. Solved this by just setting the window library explicitly in my index.js i.e.

window["export_name"] = {
    function_to_export: your_function
}

then any js script can now access window.export_name.function_to_export

edit: this seems to be an issue when running hot updates on the bundle after the initial build. It seems like webpack-dev-server just stops taking into account your output configuration

alexander-akait · 2021-04-07T12:02:30Z

We have tests on it, double check your version or provide example of the problem

turansky · 2021-04-24T02:43:46Z

Works for me with webpack-dev-server:4.0.0-beta.2

**Why?** Webpack 5 has some important features for controlling how library code gets exposed in different environments. In our case, we will want to control how the behaviors are made available for use when each behavior bundle gets loaded. More on that later. This change is just updating the dependencies to make that possible. **What?** Update; * `webpack@5.36.0` to enable better output library features * `webpack-dev-server@4.0.0-beta.2` to get a version which is compatible with Webpack 5 and includes a fix for webpack/webpack-dev-server#2484 * `webpack-cli@4.6.0` to get a version of the CLI which works with the latest dev server * `copy-webpack-plugin@8.1.1` to fix a warning when building with Webpack 5

This was much trickier than anticipated due to webpack/webpack-dev-server#2484 which necessitated upgrading to webpack-dev-server 4.0.0-rc.0

Had to switch to the latest beta version due to a bug in the dev server: webpack/webpack-dev-server#2484

lovefishs · 2021-08-18T12:51:51Z

Works for me with

{
  "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.3",
  "react-refresh": "0.10.0",
  "webpack-cli": "4.8.0",
  "webpack-dev-server": "4.0.0-rc.1"
}

This was much trickier than anticipated due to webpack/webpack-dev-server#2484 which necessitated upgrading to webpack-dev-server 4.0.0-rc.0

alex-vukov · 2021-11-23T17:58:10Z

Having the same problem with the latest possible setup + Module Federation Plugin:

{
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
}

This is in remoteEntry.js and I can't disable it because config.devServer.injectClient: false no longer works in this version of dev server

/************************************************************************/
/******/ 	
/******/ 	// module cache are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	__webpack_require__.O(undefined, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-9d6a35","webpack_sharing_provide_default_ccp_utils-webpack_sharing_provide_default_i18next-webpack_sha-7bf979"], () => (__webpack_require__("./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=5103&pathname=%2Fws&logging=info&reconnect=10")))
/******/ 	__webpack_require__.O(undefined, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-9d6a35","webpack_sharing_provide_default_ccp_utils-webpack_sharing_provide_default_i18next-webpack_sha-7bf979"], () => (__webpack_require__("./node_modules/webpack/hot/dev-server.js")))
/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-9d6a35","webpack_sharing_provide_default_ccp_utils-webpack_sharing_provide_default_i18next-webpack_sha-7bf979"], () => (__webpack_require__("webpack/container/entry/onboardingMFE")))
/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ 	onboardingMFE = __webpack_exports__;
/******/ 	
/******/ })()
;
//# sourceMappingURL=sourcemaps/remoteEntry.js.map

alex-vukov · 2021-11-24T05:38:10Z

Having the same problem with the latest possible setup + Module Federation Plugin:

{
    "webpack": "^5.64.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
}

This is in remoteEntry.js and I can't disable it because config.devServer.injectClient: false no longer works in this version of dev server

/************************************************************************/
/******/ 	
/******/ 	// module cache are used so entry inlining is disabled
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	__webpack_require__.O(undefined, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-9d6a35","webpack_sharing_provide_default_ccp_utils-webpack_sharing_provide_default_i18next-webpack_sha-7bf979"], () => (__webpack_require__("./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=5103&pathname=%2Fws&logging=info&reconnect=10")))
/******/ 	__webpack_require__.O(undefined, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-9d6a35","webpack_sharing_provide_default_ccp_utils-webpack_sharing_provide_default_i18next-webpack_sha-7bf979"], () => (__webpack_require__("./node_modules/webpack/hot/dev-server.js")))
/******/ 	var __webpack_exports__ = __webpack_require__.O(undefined, ["vendors-node_modules_webpack-dev-server_client_index_js_protocol_ws_3A_hostname_0_0_0_0_port_-9d6a35","webpack_sharing_provide_default_ccp_utils-webpack_sharing_provide_default_i18next-webpack_sha-7bf979"], () => (__webpack_require__("webpack/container/entry/onboardingMFE")))
/******/ 	__webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/ 	onboardingMFE = __webpack_exports__;
/******/ 	
/******/ })()
;
//# sourceMappingURL=sourcemaps/remoteEntry.js.map

If anyone is interested, the extra entry points disappeared after I set webSocketServer: false into devServer: {}

yxw007 · 2023-07-20T11:30:36Z

...
output: {
		library: "GlobalName",
		path: path.resolve(__dirname, 'dist'),
		filename: 'index.js',
		libraryTarget: 'umd',
		libraryExport: 'default'
},
...

This is accessed via GlobalName， work's ok in webpack5.x

alexander-akait added the type: bug label Mar 26, 2020

zhangwilling mentioned this issue Jul 2, 2020

Global window libraryTarget does not work with webpack 5 #2663

Closed

2 tasks

alexander-akait mentioned this issue Jul 13, 2020

Total Different Output with 4.x and 5.22 Beta and the application stops working with libraryTarget:'system' webpack/webpack#11148

Closed

ajaybeniwal mentioned this issue Jul 13, 2020

Fails to work in Webpack 5.0.0-beta.22 single-spa/single-spa-react#80

Closed

ylemkimon mentioned this issue Jul 17, 2020

[WIP] build: migrate to webpack 5 KaTeX/KaTeX#2318

Closed

ylemkimon mentioned this issue Sep 13, 2020

[Webpack 5] webpack dev server client entry is being returned instead of the main entry when outputting a library. #2719

Closed

dmitrysteblyuk mentioned this issue Nov 6, 2020

[Webpack 5] (minimal repro included!) __webpack_modules__[moduleId] is undefined webpack/webpack#11277

Closed

This was referenced Nov 7, 2020

Maybe a problem of webpack-5's libraryTarget:'window' #2783

Closed

Added webpack/hot/dev-server.js to the end of file ruin umd packages while developing #2831

Closed

MoreCoke mentioned this issue Nov 15, 2020

Week13 Lidemy/mentor-program-4th-MoreCoke#19

Merged

ylemkimon mentioned this issue Nov 16, 2020

fix(utils): addEntries fix #2723

Closed

6 tasks

ylemkimon mentioned this issue Nov 17, 2020

fix(utils): use plugin to add entries for webpack@5 #2839

Merged

6 tasks

gchoqueux mentioned this issue Nov 19, 2020

chore: update packages. iTowns/itowns#1523

Merged

alexander-akait closed this as completed Jan 21, 2021

jpierson mentioned this issue Feb 18, 2021

Add documentation of sockPort, injectClient, and injectHot webpack/webpack.js.org#2974

Closed

GeoffZhu mentioned this issue Feb 24, 2021

Nothing is exported using UMD #2379

Closed

mutoo mentioned this issue Feb 28, 2021

UMD is not exported while devServer inline is on. webpack/webpack#12793

Closed

careyke pushed a commit to careyke/my-scaffold that referenced this issue Mar 15, 2021

fix: 升级webpack-dev-server@4 解决webpack@5之后的bug，使用umd模式在dev-server中打包之后…

e5d3501

…没有导出方法 issue:webpack/webpack-dev-server#2484

joeldenning mentioned this issue Mar 16, 2021

webpack-dev-server v4.0.0-beta.0 not needed single-spa/create-single-spa#270

Closed

gongshun mentioned this issue Mar 22, 2021

webpack5子应用加载失败 umijs/qiankun#1092

Closed

pro-wh mentioned this issue Mar 27, 2021

ci: propagate playground errors to cypress oasisprotocol/oasis-sdk#64

Merged

This was referenced Apr 12, 2021

"initMap is not a function" when trying the first (simplest?) maps API sample googlemaps/js-samples#645

Closed

fix: use beta version of webpack dev server for globals googlemaps/js-samples#650

Merged

Lyukx mentioned this issue Jul 10, 2021

Dynamic Public Path doesn't work module-federation/module-federation-examples#886

Closed

ddohler added a commit to azavea/loam that referenced this issue Jul 26, 2021

Set up a demo page

c4e96ed

This was much trickier than anticipated due to webpack/webpack-dev-server#2484 which necessitated upgrading to webpack-dev-server 4.0.0-rc.0

ddohler added a commit to azavea/loam that referenced this issue Jul 29, 2021

Set up a demo page

95fdfc1

This was much trickier than anticipated due to webpack/webpack-dev-server#2484 which necessitated upgrading to webpack-dev-server 4.0.0-rc.0

raucao added a commit to remotestorage/remotestorage-widget that referenced this issue Aug 4, 2021

Fix dev-server build issue

5fd83d8

Had to switch to the latest beta version due to a bug in the dev server: webpack/webpack-dev-server#2484

raucao mentioned this issue Aug 4, 2021

Update dependencies, upgrade Webpack remotestorage/remotestorage-widget#123

Merged

ddohler added a commit to azavea/loam that referenced this issue Sep 14, 2021

Set up a demo page

60c5a29

This was much trickier than anticipated due to webpack/webpack-dev-server#2484 which necessitated upgrading to webpack-dev-server 4.0.0-rc.0

DanielStout5 mentioned this issue May 31, 2022

Dev server breaks library entry type #4469

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module exports are not preserved when using dev-server with Webpack 5 beta #2484

Module exports are not preserved when using dev-server with Webpack 5 beta #2484

csvn commented Mar 26, 2020

alexander-akait commented Mar 26, 2020

hmnd commented Jul 8, 2020

alexander-akait commented Jul 13, 2020

knagaitsev commented Jul 13, 2020

kamilic commented Oct 14, 2020

sprilukin commented Oct 30, 2020

sprilukin commented Nov 1, 2020 •

edited

Loading

erikwatson commented Nov 14, 2020

ylemkimon commented Nov 16, 2020

alexander-akait commented Nov 17, 2020

alexander-akait commented Nov 19, 2020

ylemkimon commented Nov 20, 2020

alexander-akait commented Nov 20, 2020

ylemkimon commented Nov 20, 2020

alexander-akait commented Nov 20, 2020

cyulin commented Dec 22, 2020

Mustang-Galaxy commented Mar 11, 2021

nicmosc commented Mar 31, 2021 •

edited

Loading

alexander-akait commented Mar 31, 2021

bturner1273 commented Apr 6, 2021 •

edited

Loading

alexander-akait commented Apr 7, 2021

turansky commented Apr 24, 2021

lovefishs commented Aug 18, 2021

alex-vukov commented Nov 23, 2021

alex-vukov commented Nov 24, 2021

yxw007 commented Jul 20, 2023

Module exports are not preserved when using dev-server with Webpack 5 beta #2484

Module exports are not preserved when using dev-server with Webpack 5 beta #2484

Comments

csvn commented Mar 26, 2020

Code

Additional details

When using webpack-dev-server

When using webpack build

Expected Behavior

Actual Behavior

How can we reproduce the behavior?

alexander-akait commented Mar 26, 2020

hmnd commented Jul 8, 2020

alexander-akait commented Jul 13, 2020

knagaitsev commented Jul 13, 2020

kamilic commented Oct 14, 2020

sprilukin commented Oct 30, 2020

sprilukin commented Nov 1, 2020 • edited Loading

erikwatson commented Nov 14, 2020

ylemkimon commented Nov 16, 2020

alexander-akait commented Nov 17, 2020

alexander-akait commented Nov 19, 2020

ylemkimon commented Nov 20, 2020

alexander-akait commented Nov 20, 2020

ylemkimon commented Nov 20, 2020

alexander-akait commented Nov 20, 2020

cyulin commented Dec 22, 2020

Mustang-Galaxy commented Mar 11, 2021

nicmosc commented Mar 31, 2021 • edited Loading

alexander-akait commented Mar 31, 2021

bturner1273 commented Apr 6, 2021 • edited Loading

alexander-akait commented Apr 7, 2021

turansky commented Apr 24, 2021

lovefishs commented Aug 18, 2021

alex-vukov commented Nov 23, 2021

alex-vukov commented Nov 24, 2021

yxw007 commented Jul 20, 2023

When using `webpack-dev-server`

When using `webpack` build

sprilukin commented Nov 1, 2020 •

edited

Loading

nicmosc commented Mar 31, 2021 •

edited

Loading

bturner1273 commented Apr 6, 2021 •

edited

Loading