Chaotic Evil Webpack

Chaotic Evil Webpack: The shimmening.

How to prevent a dependency from modifying another dependency. (except actually just give it its own copy)

TASK: Port Old React 15 Code to React 16

Prime difficulty: [old "component" library]. It was patched to work in react 16 a while back, but we're just now getting around to updating to it. It worked! The end. Just kidding. Somewhere, it was modifying the moment library and breaking timezone parsing! Was I misusing it?, was it fundamentally broken?

moment.tz("2020-11-01T00:00:00", "America/Chicago").zoneAbbr(): CST //UNIT TEST WITHOUT COMPONENT LIBRARY
moment.tz("2020-11-01T00:00:00", "America/Chicago").zoneAbbr(): UTC //IN BROWSER

I debugged the moment.tz method in the browser and detected that it was parsing out the correct timezone, then setting this._z to it except this was not being returned, some stale object was instead!

Then I noticed that the file I was stepping through in was the minified legacy component library...

How was I going to fix this unmaintained library to respect the integrity of moment.js?

NON SEQUITOR DETECTED!

NEVER fix something when you can HIDE it!

I searched for answers [clack] google <- 'webpack shim different versions for different dependencies` [click] google <- 'webpack conditional alias' [scream] google <- 'webpack multiple copies of library' [[BEEP]] > visual grep succeeded package.json dependency duplicated "moment_EVIL": "npm:moment@^2.19.1" WARNING: Duplicate package loaded. Chaotic evil += 1 Maintainability -= 1 Blockers removed += .5 [eightfold path search noises] google <- 'webpack resolve differently globals help please' [search(cartesian) for cartesian in itertools.product(relevant_words)] [search(cartesian2) for cartesian2 in itertools.product(cartesian) for cartesian in itertools.product(relevant_words)] Then I gave up... I was going to have to excise the library and replace it with lookalikes. Woke up the next day, planning to make a placeholder clone of the components we needed from the old library when I realized I knew how webpack worked all along.

Incantation:
package.json -> dependencies
"moment": "^2.25.3",
"moment_EVIL": "npm:moment@^2.19.1",
webpack.config.js -> modules -> rules
{
    test: /EVIL-component-library/,
    resolve: {
        alias: {
            'moment': 'moment_EVIL'
        }
    }
}