How can we have same npm package with two different versions in each single-spa application

[samanthaburboz]

App 1 -npm package- central-design-0.1
App 2 -npm package-central-design-0.2

[joeldenning]

If the central-design package is not a webpack external, this is accomplished simply by adding the correct version of it to each microfrontend's package.json.

If the central-design package is a webpack external loaded as an in-browser systemjs module, then you can use import map scopes to control which applications get which versions. See https://github.com/WICG/import-maps#scoping-examples

In #891 you provided a bit more detail about what's going on - it seems related to component registration. Generally, global component registration can lead to problems if you need multiple versions. Which framework are you using? If Vue, you can have one version of the components registered globally, and then the other version just available for use within components without global registration. For example, see the code below:

<template>
  <!-- use globally registered components for central-design@1.0.0 -->
  <my-button>1</my-button>
  
  <!-- use locally registered component from central-design@2.0.0 -->
  <MyButton>2</MyButton>
</template>
<script>
import { MyButton, MyInput } from 'central-design';

export default {
  components: {
    Button,
    Input
  }
}
</script>

[samanthaburboz]

@hugocruz11 No we were not able to solve this problem.

[hugocruz11]

@samanthaburboz Could you tell me a little more about how you are currently handling it, do you live with the problem?

[samanthaburboz]

We are currently handling it by using the same version of library and updating the library through governance

[Skgtouch]

@joeldenning
Problem Statement -

• We are using a common design system (library) for all the micro frontends(MFs).
• And the design system is being added in importmap for all the MFs at once (in-browser module) instead of including them separately in each MFs.
  -Now the problem is if we want to use a different version of the design system in different MFs, then how can we load corresponding version of library that belongs to currently loaded MF in browser .

{
    "imports": {
      "@myapp/app1": "https://example/micro-bundles/app1/bundle.js",
      "@myapp/app2": "https://example/micro-bundles/app2/bundle.js",
      "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.1.1/lib/system/single-spa.min.js",
      "react": "https://cdn.jsdelivr.net/npm/react@16.13.0/umd/react.production.min.js",
      "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.0/umd/react-dom.production.min.js"
       "design-system-library": "https://example/micro-bundles/**version1**/bundle.js",
       "design-system-library": "https://example/micro-bundles/**version2**/bundle.js",
    }
  }

import { Button } from "design-system-library"

this is how import is being used in each MFs.

Now let's say in the above example that we want to use version 1 of design-system-library for app1 and version 2 for app2.

How can we resolve the different version of library for different MFs with same import.

Tried using scopes in importmap but can't find the working solution.

Could you please provide some sort of sample code with respect to the above code that how add scope.

[mlaw93]

systemjs-importmaps supports scoped context. Locally I had to use full URL path not just root path. I've had mixed luck getting it to work. I was able to get it work on my localhost but when I deploy to our servers its not working...which does not makes sense.

Here is code from there example.

<script type="systemjs-importmap">
{
  "imports": {
    "lodash": "/path/to/lodash/index.js",
    "lodash/": "/path/to/lodash/"
  },
  "scopes": {
    "/path/to/lodash/": {
      "lodash-dependency": "/path/to/scoped/package.js"
    }
  }
}
</script>