Webpack-dev-server: Maybe a problem of webpack-5's libraryTarget:'window'

Created on 20 Oct 2020 · 12Comments · Source: webpack/webpack-dev-server

Bug report

libraryTarget:'window' works differently in webpack-4 and webpack-5.

What is the current behavior?
I'm using the single-spa to create my apps. When I load the micro-frontend app, I did not use SystemJS, but create a script element to load javascript code and save the app object in a window object's property. like this:

export const runScript = async (url: string) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;

    const firstScript = document.getElementsByTagName('script')[0];
    (firstScript as any).parentNode.insertBefore(script, firstScript);
  });
};

const loadApp = async (appPath: string) => {
  try {
    await runScript(`/${appPath}/index.js`);
    console.log(appPath, '=', (window as any)[appPath]);
  } catch {
    console.log("load child app's javascript file error。");
  }
  return (window as any)[appPath];
};

singleSpa.registerApplication({
  name: 'app1',
  app: () => loadApp('app1'),
  activeWhen: '/app1,
  customProps: {
  },
});

So, I use libraryTarget:'window' in the app1's webpack configuration.

In webpack-4, it works. after doing this I can use window.xxx to get my app object, but when I update to webpack-5, the window.xxx becomes to a void object.

using webpack-4:

using webpack-5:

The other difference is that I use web-dev-server to start webpack-4 app, webpack serve to start webpack-5 app, is this a possible problem?

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

What is the expected behavior?
works like webpack-4's output code.

Other relevant information:
webpack version: 5.1.3 & 4.44.2
Operating System: macos
Additional tools:single-spa

Source

toulondu

Most helpful comment

Can you fix this issue quickly, i got the same problem.

JonesClyne on 28 Oct 2020

👍3

All 12 comments

For maintainers only:

[ ] webpack-4
[x] webpack-5
[ ] bug
[ ] critical-bug
[ ] enhancement
[ ] documentation
[ ] performance
[ ] dependencies
[ ] question

webpack-bot on 20 Oct 2020

Yes, it is bug on webpack-dev-server, already fixed, hope we will do release in the current week

alexander-akait on 20 Oct 2020

Maybe you can crate simple example, I want to check it

alexander-akait on 20 Oct 2020

Maybe you can crate simple example, I want to check it
Of course, I delete some code of my original code, here is a simple example(maybe not simple enough)
https://github.com/toulondu/webpack-bug-demo

toulondu on 21 Oct 2020

👍1

I have the exact same issue.
My library becomes undefined or an empty object on the global window in webpack 5 with webpack-dev-server.