Define property if undefined about inert

[murilocruz]

This is an issue that only happens when using jest, and I believe that it's because when running / building the app, the webpack handles the imports, and imports the inert script only once, but jest uses it's own importing / building mechanism that happens to run the inert script for every imported component that imports the inert package.

This is a problem with jest's import mechanism, but I don't see them fixing anytime soon. I agree that this change on the inert script would avoid this jest issue, and as far as I know, there would be no harm to other use cases of the inert package

[alice]

Looks like they're including the polyfill in the component (to avoid including it unnecessarily), but the polyfill affects the global scope. I think if we just check that the property hasn't already been defined before we define it, we should be ok.

[SimenB]

Every single test in Jest runs in isolation (using Node's vm API), and it only executes modules once per test file. The underlying issue is that Element.prototype is the same across instances of JSDOM.

const { JSDOM } = require("jsdom");

const { window: window1 } = new JSDOM("");
const { window: window2 } = new JSDOM("");

window1.Element.prototype.foo = "bar";

console.log(window2.Element.prototype.foo); // logs "bar"

Might be worth an issue? Not sure

EDIT: An example closer to what happens inside of Jest:

const { Script } = require("vm");
const { JSDOM } = require("jsdom");

const dom1 = new JSDOM("", { runScripts: "outside-only" });
const dom2 = new JSDOM("", { runScripts: "outside-only" });

const script1 = new Script(`
  window.Element.prototype.foo = "bar";
`);

const script2 = new Script(`
  console.log(window.Element.prototype.foo);
`);

dom1.runVMScript(script1);
dom2.runVMScript(script2);

This logs out bar when executed

[bjankord]

We were able to reproduce this issue in Chrome. Our use-case is very similar to @timbomckay's
We have two react components, an overlay and a modal, that each require/import the inert polyfill. Users can import overlay and/or modal separately and use either one or both.

If they import both, we found that Webpack was not de-duping the polyfill and so we ran into the error, TypeError: Cannot redefine property: inert.

To temporarily work-around, we've changed the import to a conditional require in our code:

if (!Element.prototype.hasOwnProperty('inert')) {
  require('wicg-inert');
}

It would be great to have this check before the inert property is defined on the Element's prototype.

[robdodson]

Sent in a PR for this. If folks want to try it in their projects before we land it to verify it fixes the issue that would be most appreciated :D

[timbomckay]

Yeah that's the issue we're having. We didn't have this issue when running a test on the first component that had it. Error came about when we began using it on another component and running tests with that. Seems like the prototype definition persisted after being defined on the test of first component.

[bjankord]

Tested the branch you have @robdodson in our repo where we import the polyfill into a react component. It works great!

Ran the Jest tests and didn't run into any issues and then I ran the code in the browser and it didn't log any console errors, no TypeError: Cannot redefine property: inert as we were seeing before this update.

Thanks for the quick fix on this 👍

[bkardell]

Sorry, I'd like to help, but I'm not entirely sure that I understand... Can you add some additional description? Are you including the polyfill several times? How are you including it? Is it possible to create a pen or something to illustrate?

[timbomckay]

Yes, as Alice said we have multiple components that use the inert script but we don't want to include the script if none of these components are being used on the page/application.

For example:

// DialogComponent.vue
import 'wicg-inert';

export default {
    ...
};

// PopoverComponent.vue
import 'wicg-inert';

export default {
    ...
};

// LoadingComponent.vue
import 'wicg-inert';

export default {
    ...
};

But we don't import any of these components until they're actually needed.

However, I'm not sure if this is already working properly with webpack's dynamic importing as I'm only getting this error when running Jest tests, as reported here: jestjs/jest#8373

[bjankord]

Will give this a go in our project on Monday.