How to ensure that some code or module runs before any other module?

In a React app, I’m defining an extension on the Object class itself:

declare global
{
    interface Object
    {
        asEnum<TEnum>(this: TEnum): EnumWrapper<TEnum, any>;
    }
}

export function extendObjectType()
{
    Object.prototype.asEnum = function()
    {
        return new EnumWrapper(this as any)
    }
}

(I am aware that extending Object in this way is controversial, but I understand the issues, I’m comfortable with this, and as far as I can tell it’s unrelated to my problem.)

EnumWrappper is a custom class (not shown) that does useful things with the object that represents the enum that it’s wrapping.

Then I can do this:

enum YesNoMaybe
{
    Yes,
    No,
    Maybe
}

console.log(YesNoMaybe.asEnum().keys.join(","))  //prints out "Yes,No,Maybe"

This actually works and does print out the desired value, but obviously only if it runs after the code that extends the Object class. This is true in my React components, but not in a module in general, because the module code seems to run before the extension is made.

I have tried many things to arrange it so that the extension runs first, such as:

  • putting it in the main.tsx component
  • adding a custom script in the React loader html
  • making it the first module alphabetically

None of this helps. So the general question is: how can I arrange things so that a given block of code (or module) runs before any other module?