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

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.

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' });
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`
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?

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