How does SystemJS support multiple versions of the same library? - systemjs

Question

I'm working on a jspm/systemjs app and would like to better understand how SystemJS handles multiple versions of the same dependency. Consider the following (simplified) SystemJS config example:
map: {
"react": "npm:react#0.14.8"
"npm:foo": {
"react": "npm:react#0.14.7"
}
}
I assumed when my code imported react it would get v0.14.8, while code in the "foo" dependency would receive v0.14.7. However, my browser console prints warnings about multiple copies of react being found.
Questions:
How does SystemJS supports multiple versions of dependencies,
Why would I be receiving an error like this if the different versions are kept separate?

Answer 1

Since SystemJS uses import-maps, you can use this approach:
Using Multiple Versions of the Same Module
It's easy to require multiple versions of the same package with import maps. All you need to do is use a different import specifier in the mapping as shown below:
<script type="importmap">
{
"imports": {
"lodash#3/": "https://unpkg.com/lodash-es#3.10.1/",
"lodash#4/": "https://unpkg.com/lodash-es#4.17.21/"
}
}
</script>
You can also use the same import specifier to refer to different versions of the same package through the use of scopes. This allows you to change the meaning of an import specifier within a given scope.
<script type="importmap">
{
"imports": {
"lodash/": "https://unpkg.com/lodash-es#4.17.21/"
},
"scopes": {
"/static/js": {
"lodash/": "https://unpkg.com/lodash-es#3.10.1/"
}
}
}
</script>
With this mapping, any modules in the /static/js path will use the https://unpkg.com/lodash-es#3.10.1/ URL when referring to the lodash/ specifier in an import statement, while other modules will use https://unpkg.com/lodash-es#4.17.21/.
Source: https://www.honeybadger.io/blog/import-maps/