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

[csvn]

• 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

• [x] 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?

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

[alexander-akait]

Pr welcome

[hmnd]

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

[alexander-akait]

/cc @Loonride Can you look at this?

[Loonride]

/cc @Loonride Can you look at this?

I will take a look

[kamilic]

this problem still existed on [email protected].

[sprilukin]

this problem is still present in [email protected]

[sprilukin]

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]

This is still an issue for me.

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

[ylemkimon]

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

[alexander-akait]

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

[alexander-akait]

@ylemkimon just check, do we have test for:

• https://github.com/webpack/webpack-dev-server/issues/2692
• and for this

[ylemkimon]

@evilebottnawi :smile: https://github.com/webpack/webpack-dev-server/blob/e647af47e7b8dec4dc769a2e408b3a530b6882c2/test/integration/ModuleFederation.test.js#L27-L53

[alexander-akait]

@ylemkimon good, for library?

[ylemkimon]

@evilebottnawi It tests for libraryTarget: 'umd': https://github.com/webpack/webpack-dev-server/blob/1aa0d2db699d3d9edad7d354b4501d2773aa3675/test/fixtures/module-federation-config/webpack.config.js#L10

[alexander-akait]

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

[cyulin]

this problem is still present in [email protected]

[csvan]

@cyulin webpack-dev-server 4 is in Beta and has support for Webpack 5. You can test it out and report any issues you find.

[kekeqy]

this problem is still present in [email protected]

[cyulin]

this problem is still present in [email protected]

use webpack-dev-server@4

[kekeqy]

this problem is still present in [email protected]

use webpack-dev-server@4
It does work. I'm looking forward to the official version soon.

[danGiacomelli]

I started to use [email protected]. It really does work.

[ncastaldo]

I used [email protected] and it worked! Thank you @danGiacomelli!
In webpack.config.js I also had to modify contentBase into static

...
devServer: {
  contentBase: path.resolve(__dirname, 'test'),
  compress: true,
  port: 8080
}

into

...
devServer: {
  static: path.resolve(__dirname, 'test'),
  compress: true,
  port: 8080
}

[alexander-akait]

Let's close because fixed in beta, in near future we will do new release with more fixes and features

[Mustang-Galaxy]

[email protected] is work

[nicmosc]

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]

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

[bturner1273]

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]

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

[turansky]

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