Does webpack remove custom variables or event listeners attached to `window` in production?

Question

The problem:

We're facing an issue where any event listeners or global variables we attach to window does not seem to be there in our production build (but they are there in the development build).

• Webpack config: https://gist.github.com/saadq/9f2f800c88716d11410e63859382f47d
• Build script: webpack --mode=production

---

Context:

We have a use case where our webapp renders inside a parent app. The parent app basically needs to tell us when we need to render our app. To do this, we have tried using event listeners as well as global functions.

How our app is loaded into the parent app

To render our webapp inside the parent app, the following happens:

1. The parent app makes an HTTP call to myappwebsite.com/asset-manifest.json. This is like the default asset-manifest.json that gets created for any create-react-app webapp.
2. The parent app finds the path to the main bundle.js from this asset manifest, and then makes an HTTP call to fetch our bundle.js using this path (e.g. myappwebsite.com/bundle.js).
3. They dynamically inject a script tag into their head with its src set to our bundle.js to load our app's bundled javascript.
4. They listen for the onload event of this new script element before trying to call any of our code or dispatching any events.

Attempt 1

Child app:

// index.tsx

window.addEventListener('renderApp', (event) => {
  console.log('This is running!'); // This only prints in `development`
  const { rootId } = event.detail;
  ReactDOM.render(<App />, document.getElementById(rootId));
})

Parent app:

// index.tsx

console.log('Dispatch is running!'); // This prints in both `development` and `production`
const renderEvent = new CustomEvent('renderApp', { detail: rootId: 'root' });

// This runs in the script.onload function to wait for our app to load
window.dispatchEvent(renderEvent);

This code works in the development build but not in the production build. In production, the dispatch does execute, but for some reason the event listener does not. When we tried to set some breakpoints on the minified production bundle, we noticed that the addEventListener code is there, however it is not actually executing... This is strange because the addEventListener is at the top level of the index.tsx in the child app and is not conditionally added.

---

Attempt 2

Child app:

// index.tsx

window.renderApp = (rootId) => {
  console.log('Child render is running'); // This only prints in `development`
  ReactDOM.render(<App />, document.getElementById(rootId));
})

Parent app:

// index.tsx

console.log('Render is running!'); // This prints in both `development` and `production`

// This runs in the script.onload function to wait for our app to load
window.renderApp(rootId);

Same issue here, the code works in the development build but not in the production build. In production, the call goes through but the global function does not seem to be on window. I am able to verify this by printing out window in the console.

---

It seems that any globals I set on window or any event listeners I set to it get ignored in the production build. Is this by Webpack's design? Or do you think something is messed up in my config/build script that is causing this to happen?

Answer 1

The problem ended up being an issue where the output of our bundle was separated into main.js and vendor.js, but we were only loading the main.js into the parent app.

Answer 2

Add a node entry with global: true to your config:

node: {
    global: true,
    __filename: false,
    __dirname: false,
  },

Answer 3

Webpack does behave a bit strange when it comes to windows object and we can site number of discussions on this matter.

According to this answer adding globalObject: 'this' line to the output section in webpack config file might fix the issue.

Other references https://github.com/webpack/webpack/issues/7112 https://github.com/markdalgleish/static-site-generator-webpack-plugin/issues/130