Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Expose variable doesn't work in watch mode

See original GitHub issue

Bug report

What is the current behavior? When I expose a variable using var libraryTarget

the exposed variable is empty object in watch mode dev server.

It works fine when I open the html file directly from filesystem.

If the current behavior is a bug, please provide the steps to reproduce.

Here’s minimal reproducable project https://github.com/ingun37/webpack-bug-reproduce

Write entry file like this

var aaa = "aafufufa"
export {aaa}

Configure webpack like this

const path = require("path");
module.exports = {
    output: {
        library: 'yourLibName',
        libraryTarget: 'var',
    },
    devServer: {
        hot: true,
        contentBase: path.resolve(__dirname, "dist"),
        publicPath: "/",
    },
}

Write HTML like this

<script src="./main.js"></script>
<script>console.log(yourLibName)</script>

Run webpack dev server in watch mode

npx webpack serve --open

You can see the console outputs

{}

While it outputs correctly when you just directly open the html file.

[Log] Object (index.html, line 9)
__esModule: true
aaa: 
Symbol(Symbol.toStringTag): "Module"
Object Prototype

What is the expected behavior?

Expose the variable correctly.

Other relevant information: webpack version: 5.15.0 Node.js version: 12 Operating System: MacOS Additional tools:

Side note

I remember I had the same problem when I was using Webpack 4. Also I found an article addressing the same problem https://stackoverflow.com/a/51924958/3769433