TODO: what's a real-world example of dependency hell? about import-maps

[zkat]

So, I have this internal webapp I often run npm-related tests in because it's been such a good example of modern "real world" webapps. It doesn't take long to find potential conflicts using npm ls that could affect frontend deps:

Two different versions of regenerator-runtime in a single tree

├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected] 
├── [email protected] 
└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └─┬ [email protected]
          └── [email protected] 

Two different semver-major versions of querystringify used by sockjs-client

  └─┬ [email protected]
    ├─┬ [email protected]
    │ └─┬ [email protected]
    │   └─┬ [email protected]
    │     └── [email protected] 
    └─┬ [email protected]
      └── [email protected]

With your forgiveness, I'm also going to share some non-lodash examples that show up in server-side/tooling deps which I think would just as reasonably be used on the frontend. I think it's important to note that a big reason why there might not be as many real-world multiversion examples that involve actual conflicts is because so many folks are restricted by the dependency-hellish world that frontend exists in right now that there's a bit of a cultural thing against even letting it get to this point. The Node.js world, by contrast, has been much more aggressive about small-modules, and thus a potential increase in version conflicts, because the Node algorithm has always protected them from that.

Tree showing multiple locations of har-validator at 3 different versions.

├─┬ [redacted]@10.0.7
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └─┬ [email protected]
│ │     └─┬ [email protected]
│ │       └── [email protected] 
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ └── [email protected] 
└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └── [email protected] 

Another example from the same app involves 4 different semver-major versions of the same library:

Another npm ls showing camelcase at versions 1, 2, 3, and 4.

├─┬ @npm/[email protected]
│ └─┬ [email protected]
│   ├── [email protected] 
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ @npm/[email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ @npmcorp/[email protected]
│ └─┬ [email protected]
│   ├── [email protected] 
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected] 
│ └─┬ [email protected]
│   ├── [email protected] 
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   ├── [email protected] 
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   ├── [email protected] 
│   │   └─┬ [email protected]
│   │     └── [email protected]  deduped
│   └─┬ [email protected]
│     ├── [email protected] 
│     └─┬ [email protected]
│       └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   ├── [email protected] 
│   └─┬ [email protected]
│     └── [email protected]  deduped
├─┬ [email protected]
│ └─┬ [email protected]
│   ├─┬ [email protected]
│   │ └─┬ [email protected]
│   │   └─┬ [email protected]
│   │     └─┬ [email protected]
│   │       └── [email protected] 
│   ├─┬ [email protected]
│   │ ├── [email protected] 
│   │ └─┬ [email protected]
│   │   └── [email protected]  deduped
│   └─┬ [email protected]
│     └── [email protected] 
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └─┬ [email protected]
│ │     └── [email protected] 
│ └─┬ [email protected]
│   ├── [email protected] 
│   └─┬ [email protected]
│     └── [email protected]  deduped
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] 

[justinfagnani]

I've definitely hit this in my projects with lodash 3 and 4, and not lodash-es.

Some similarly low-level common library like underscore, rxjs, etc. would probably yield examples.

[Jessidhia]

react-popper, which still requires react 15 because it accesses import React from 'react'; React.PropTypes, but that has been removed in react 16.

Though I guess react+react-dom is an example of the opposite problem; everything you load must use the exact same packages, as loading more than one will cause conflicts even if they're the exact same version; the bloat is the least of the problems.

I currently work around it by doing a string replace in the source code to import PropTypes from 'prop-types' instead, but an alternative could be to have a package map just for that module that would export { default } from 'react'; export { default as PropTypes } from 'prop-types'.

Note how, as this module would be providing react itself for react-popper, it still needs to be able to import the real react by name, so the mapping would have to not apply for the shim package.

[domenic]

@caub I don't think your question has anything to do with the TODO in this issue, so I'd ask you to move it elsewhere.

[justinfagnani]

Hey @zkat thanks! Can you put the last three example in code blocks? :)

[Jessidhia]

It seems they are in code blocks but the formatting is being crazy. GitHub also isn't correctly expanding the second <details>.

[zkat]

Sorry about that! Fixed!

[domenic]

This has been incorporated into the overhauled proposal! https://github.com/domenic/import-maps#multiple-versions-of-the-same-module