CODEWITHSUNDEEP
javascriptreactjssingle-spa-angularsingle-spa
RONE
RONE

Reputation: 5485

single-spa with multiple versions of same library(React) or Framework, How to handle

I have been going through single-spa from past few days, and it is very simple to setup and integrate the frmawork(Angualar) apps or libraries(React/redux app).

But I have one doubt though

{
  "name": "single-spa-simple-example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    ...
    "single-spa": "^4.3.4",
    "single-spa-react": "^2.10.2",
    "single-spa-vue": "^1.4.0",
    "single-spa-angular":"4.0.1",
    "vue": "^2.6.10"
  },
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --config webpack.config.js -p"
  },

Consider today I have 10 or more React apps, and couple months after I need to work on latest React app (for ex: React-18), then how to include that project in this existing single-spa project, as we have only one package.json file and one node_modules folder, we can not have two different versions of same package name in package.json file.

And I do not want to work on the existing React App.

  1. The existing Apps should run in the same version it was built, and the new React versioned App should also Run. is this possible in single-spa ?

  2. If single SPA has one package.json file, I have one more doubt, consider I have a simple app having react-16 and angular9 app, and for some reason, I want a libray say XYZ , for both React and angular projects , But they want differnt versions of X.js

  3. Do any one has implemention idea like 

Single-SPA
   |-AngularApp1
   |    | /src
   |    |-node_modules
   |    |-package.json (version 6)
   |
   |-AngularApp2
   |    | /src
   |    |-node_modules
   |    |-package.json  (version 9)
   |
   |-React
   |    | /src
   |    |-node_modules
   |    |-package.json

Upvotes: 2

Views: 5036

Answers (1)

Milton
Milton

Reputation: 1012

This is a common problem faced when working with microfrontends, though there isn't a clear cut best solution.

Indeed, you would need to split your source code into multiple NPM packages with their own package.json to allow different apps to have different versions of dependencies (React, XYZ lib). You can then compile each app into a bundle and launch those bundles in Single-Spa. But there are still challenges. Your total site bundle size will grow since you are now not fully able to share the dependencies that are the same. You also still cannot run multiple React apps in the same view at once if they don't use the same version of React.

There are also tools to help with some of this, like Lerna but you might not need that complexity yet. There are also other ways to create microfrontends, such as microservices that return server side rendered HTML so the integration doesn't need to happen in build time like with Single-Spa but rather at runtime. This, as everything else, has pros and cons.

So you might consider, is it really worth it to run multiple different versions of React? Perhaps it's better both for your users and your developers to instead try to upgrade to the latest versions in the older apps. Since they are microfrontends they should be smaller which means that upgrade should be easier. This also achieves that your bundle to download is smaller and you don't need more backend infrastructure. But you do need to collaborate across all apps to upgrade at the same time. Each approach has its own challenge.

Upvotes: 2

Related Questions