Stack Overflow
Stack Overflow

Questions tagged [single-spa]

Questions related to usage and implementation of single-spa and related technologies such as import maps, SystemJS, webpack/rollup configuration, etc.

Website: https://single-spa.js.org

FAQ: https://single-spa.js.org/docs/faq/

Docs: https://single-spa.js.org/docs/getting-started-overview

More help: https://single-spa.js.org/help/

Source code: https://github.com/single-spa

217 questions
3
votes
1 answer

Creating Structural Micro Frontend Using single-spa

I would like to design my frontend as a micro frontend project, and I would like to use single-spa. The problem I have is: I would like to create an application called MF1 as a based structure, it is a react applicant and would have a header,…
Reza
  • 493
  • 5
  • 14
3
votes
1 answer

Cannot use a web worker with my microfrontend

I just want to use a simple web worker in one of my single-spa react micro frontend. However when I initialize it, that doesn't work, the program cannot find the worker. I tried with the 2 following methods inside of my root.component.js: The…
Work
  • 31
  • 1
3
votes
1 answer

Jest babel - Spread Operator - Jest encountered an unexpected token

I am use Single SPA frameowrk to create a micro frontend using React. When rub build there is no error. But following error is thrown while running test or coverage. Error Details : Test suite failed to run Jest encountered an unexpected token This…
Jayesh Nathwani
  • 31
  • 3
3
votes
1 answer

Facing issue while upgrading Angular 11 app to Angular 12

When we are trying to update our Angular 11 application(Single SPA micro frontend) to Angular 12 we are facing bellow issue. Error on console when trying to run this app: An unhandled exception occurred: Invalid configuration object. Webpack has…
Dnyaneshwar
  • 148
  • 7
3
votes
0 answers

Single-Spa: Uncaught Error: application 'app1' died in status UNMOUNTING: unmountComponentAtNode(...): Target container is not a DOM element

I have registered 4 react applications using registerApplication of Single Spa. When I am navigating from one app to another I am seeing an error in console as well as an overlay on the browser. Uncaught Error: application 'app1' died in status…
Shreya Shah
  • 582
  • 1
  • 4
  • 17
3
votes
1 answer

Is there any way to show a loader till micro apps getting loaded in single spa project

I am using single spa for my current project and want to have a loader till my micro app gets loaded and there will be a switch between these micro apps , in that case also I want to show a loader. Is there any way to achieve the same?
ranjeet kumar
  • 251
  • 2
  • 10
2
votes
0 answers

single-spa shared pinia store among Vue3 microapps

I'm setting up a microfrontends architecture with single-spa, vue3 and pinia. I'm having some issue whereby I'm defining a store in a utiity microapp which gets imported in all other microapps. In a microapp I'm then creating a pinia as a plugin and…
Irith
  • 93
  • 14
2
votes
0 answers

How to load components (containing assets) from npm package in a Single-Spa application?

I have an application build using Single-Spa and it consist of: Root Config App (hosted on http://localhost:3000) App1 (Angular application hosted on http://localhost:3001) App1 has a dependency (npm package) Dep1. Dep1 provides img-preview.png…
conrisc
  • 43
  • 1
  • 5
2
votes
1 answer

How to define routing for react Micro front end application in Single Spa

I have created a react micro front end application in single spa using the command create-single-spa. Inside the singleSpaReact method, the root component is mentioned. const lifecycles = singleSpaReact({ React, ReactDOM, Router, …
I'm nidhin
  • 2,592
  • 6
  • 36
  • 62
2
votes
0 answers

systemjs-webpack-interop requires webpack@>=5.0.0-beta.15 and output.libraryTarget set to 'system'

I'm getting the error in the title when trying to build micro-frontend structure use single-spa: { "dependencies": { "core-js": "^3.6.5", "html-webpack-plugin": "^5.5.0", "single-spa-vue": "^2.1.0", "vue": "^2.6.11", …
zhang
  • 41
  • 3
2
votes
0 answers

Shared external Angular Library with single-spa

Is there a way to use an angular library as an alternative to single-spa utility module, imported with systemjs in the root application? I want to create a service within this shared library, that can be used by the angular micro-frontend apps as an…
Dave Akinyemi
  • 21
  • 2
2
votes
1 answer

How do I add a favicon to Single Spa?

I've spent some time trying to find a way to add a favicon to Single Spa application, believe it or not :). I couldn't find anything in the framework documentation. There are bits and pieces about static assets but it didn't really help me much. I…
CyberRobot
  • 686
  • 9
  • 20
2
votes
1 answer

How to effectively create a production build within a SingleSPA React App?

Every time we access our deployed ReactJS App, we get a red square for the dev-tools, saying we're not on an optimized build for production. The app is a SingleSPA Microfrontends web app. The fact is that every microfrontend and the root…
Ale TheFe
  • 1,540
  • 15
  • 43
2
votes
0 answers

SystemJS: Material UI webpack external import sub paths causing errors

I've currently got a mostly working single spa setup where I need to have Material UI (v4). This setup currently works with any import from from "@material-ui/core": Import Map on the root app