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.
163
questions
0
votes
0
answers
8
views
single-spa set Vue as an external: defineComponent is not a function
I am using Vue with single-spa and I decided to try to reduce the bundle size.
To do this, first I started by trying to set Vue as an external dependency by setting it in webpack.config.js of each ...
-2
votes
0
answers
23
views
sharing angular components across application [closed]
We are implementing micro-frontends using single spa and angular 13. There is not much documentation/examples available for angular.
Scenario:
created two angular apps
ng new app1
ng new app2
added ...
0
votes
1
answer
32
views
"mat-icon" doesn't work in the angular single-spa projects
I created an angular project from "single-spa" as the library and I implemented angular material inside the project. I used mat-icon but it doesn’t work. it doesn't show anything. And also I ...
0
votes
0
answers
44
views
Content-Security-Policy refusing to load localhost script
I'm building a micro-frontend web app with single-spa and am trying to set up import map overrides on my deployed site.
I'm getting the following console error when trying to load a micro frontend ...
0
votes
0
answers
1k
views
<html ng-app="app"> convert to single-spa will make directives in the index.html disappear
I have an angular.js app where the index.html looks something like with ng-app in the <html> tag
<html lang="en" ng-app="app">
<head></head>
<body&...
0
votes
0
answers
24
views
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 ...
-2
votes
0
answers
16
views
How does location.reload or document.location.reload work in single SPA. I have to force reload a page to refresh the values on a page
How can i refresh my page in angular single spa. location.reload or document.location.reload do not work here. Gives an error 'url does not match'
0
votes
1
answer
2k
views
single-spa - how to load an Angular app without using SystemJS
I have an AngularJS version 1.4 application and I want to migrate to Angular 12+ . So I decided to use single-spa to integrate the new Angular App to the Legacy App.
I'm following this video Single ...
0
votes
0
answers
22
views
Why is single-spa CLI for Angular not creating necessary files?
When I run the CLI to standup a React and Angular MFE in a single-spa ecosystem, the React app runs smoothly but I am not given an option to add routing for Angular nor does it create the necessary ...
0
votes
0
answers
38
views
Chakra UI with Single-spa parcel and Reactjs - Bug in showin Toast when navigating between spa parcels
I have an application in ReactJS and I'm using single-spa.
When navigating between parcels, the TOAST Chakra does not appear again.
Example (Route File)
<Route path="/router-1/">
<...
0
votes
1
answer
59
views
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 ...
0
votes
0
answers
68
views
How to make default route display an application in single-spa without adding activeWhen function
I am using single-spa framework and most things are going well.
Using the single-spa-layout I have added a default route which should be displayed when the url does not match a route that I have ...
0
votes
0
answers
39
views
Single-SPA + MSAL
I am trying to understand how can i implement microfrontend arch (single-spa js) with msal .
When we are registering Application in the single-spa , should we put the MSALBrowser inside each sub route ...
0
votes
0
answers
94
views
How to dynamically load microapplications with single-spa
I'm trying to build a React root application that loads micro applications dynamically based on logged user role.
My root application has been created with create-react-app.
index.tsx is like this
...
0
votes
1
answer
73
views
Rendering UI with Utility module in single-spa
I am trying to render a UI component using in-browser utility module in single-spa, which I have created using create-single-spa command and selected in-browser module option. As there is no "...
0
votes
0
answers
93
views
Building custom component library for MUI-5, What should be dependencies vs peer dependencies?
I'm currently building a react component library to be delivered as an npm module.
I want the library to have the capacity to style components, run storybook to display the components, and have ...
0
votes
0
answers
51
views
Single-spa Angular material error in loading
I'm developing my own SPA website and i try single-spa, when i use angular material in the HTML i notice the example menu is very diferent vs angular alone:
Single-Spa Menu Material
Second Image
See ...
1
vote
1
answer
218
views
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 ...
0
votes
1
answer
55
views
How to setup font-awesome with a single-spa project?
I have a single spa application with a root-config, a styleguide, and a couple of react applications. All of these application are generated using the yarn create single-spa command.
I tried creating ...
2
votes
1
answer
457
views
Cannot read properties of undefined (reading 'meta') in Vue 3 single-spa app
I am working on a micro-frontend project, using vue 3 and single-spa 5.9.3.
I was trying to update one Micro-frontend npm packages to recent releases, it builds correctly but throws this error:
"...
1
vote
0
answers
134
views
Single-SPA Vite Code Split with different domains not working
I am building a micro front-end using Vue 3, Typescript, and Vite and for this, I have a wrapper in single-spa, let's call it wrapper.product.com.
And I also have a micro front-end, let's call it A, ...
0
votes
0
answers
83
views
Load Different Angularjs apps using single spa
I have implemented single spa with angular 9 and followed below link
https://github.com/liuyiba/Single-spa-angular-cross-domain. It is based on coexist apps. My need is to inject one angular app into ...
0
votes
0
answers
39
views
Not able to load React from import map json when using scopes
Error:
Application 'navigation' died in status LOADING_SOURCE_CODE: Unable to resolve bare specifier 'react' from https://localhost:3200/shared-lib/react-dom@17.0.2.js
Import Map looks like:
{
...
0
votes
0
answers
89
views
How to display a different modules of micro fronted app in one page of a container using Single spa and angular 9
I want to create a dashbord that display multiple components from different micro frontend
but the problem is that I coudn't display more than one micro frontend with the same path.
I am using angular ...
0
votes
0
answers
67
views
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 ...
0
votes
0
answers
25
views
RBAC in micro-frontend using single-spa reactJS
I am building a micro-frontends using single-spa, each one is dedicated to different business units. I want to implement an RBAC so that authorized users can view their own business units only, but ...
0
votes
0
answers
18
views
How to update helper text of two interdependent inputs?
Let's say I have a date range and I want to validate that the start date is smaller than the end date and vice versa.
const schema = yup.object().shape({
startDate: yup
.date()
.when('...
0
votes
0
answers
97
views
Single Spa Micro fontend @emotion/react issue with multiple emotion/react loaded with they same version
I have a codebase structured as in single spa micro fontend in react. With mui5 and emotion/react for layouts and designs. Now in each micro frontend i have e separate package.json in it. With emotion/...
5
votes
0
answers
750
views
Single SPA + Vite - Cannot use import statement outside a module
I am using Typescript + Vite + Single SPA
Just trying to replicate the https://github.com/joeldenning/vite-single-spa-example
and https://github.com/joeldenning/vite-single-spa-root-config.
Hence, in ...
0
votes
0
answers
79
views
TypeScript error setting a component into the rootComponent option in single-spa
I've an error that the type I am passing to the rootComponent option is not compatible. I create a simple component in react and then pass it to SingleSpaReactOpts to allocate it inside the ...
1
vote
2
answers
435
views
child route not working in single spa react app
{
"name": "@mf-demo/react",
"scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --env standalone",
"build": "concurrently npm:build:*",
"build:webpack": "...
1
vote
0
answers
170
views
Angular 11 with MSAL app and using Parcels removing app-redirect at the unmount point
I am using angular 11 application with msal 2.0.
So to according to https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-angular/docs/v2-docs/redirects.md i am using ...
0
votes
0
answers
67
views
single-spa: How to deal with libraries that aren't exported as UMD?
I'm doing some testing with MFEs, and I've created a framework with 3 apps.
These MFEs share some libraries, so I added them to the "externals" array in webpack.config and included them in ...
3
votes
0
answers
235
views
Single SPA - Handle error in nested micro front end
MFE = micro-front-end
I'm trying to import 1 MFE to another MFE.
MFE-food calls MFE-cart.
When MFE-cart is down, there is an impact on MFE-food, my expectation is MFE should run properly.
in root-...
-1
votes
1
answer
146
views
How to get the App running both in the integrated and the standalone in single spa
Im new to Single Page Application (SPA).
I created 3 separate applications, where one is the root config app and the other two acts as the child applications.
We need to run one of these child ...
1
vote
0
answers
104
views
Unit tests in Single-Spa. React. ReferenceError: System is not defined
hello I have a problem with Unit tests in Single-Spa.
Mine jest.config.js looks like this:
module.exports = {rootDir: "src",
preset: "ts-jest",
transform: {
"^.+\\.(j|...
0
votes
0
answers
51
views
webpack libraryTarget set as system is throwing error react undefined in library react-redux
When I build an application with webpack libraryTarget set to system. Libraries like react-redux are not able to find react from the provided browser module in importsmap.
To Reproduce
Use sample repo:...
0
votes
0
answers
104
views
Cannot integrate angularjs spa in a root layout using microfrontend layout
I am trying to use old angularjs and new app built in react. Converted the existing angularjs app to a single spa app. I can add a new frontend to this angularjs single spa app and it works.
But what ...
0
votes
0
answers
178
views
How to load default Component in default App and next to do redirect to another sub app?
I Have 3 apps : root-config (single-spa), navbar-app ( port 4201 angular 12 ) angular-app (port 4202 angular 12 )
My root-config app (localhost:9000) has root-config.ts
registerApplication({
...
1
vote
0
answers
297
views
Implement single-spa to run angularjs and vue.js with with systemjs
Hi all I am new and trying to setup single-spa for angularjs and vue.js projects.
My objective here is to run angularjs + gulp application and vue.js application as one single application, this I am ...
0
votes
1
answer
362
views
single-spa Micro front End application to be consumed in legacy web application which is not based on single-spa and root config
I have created a Micro Front End application based on single-spa react. It is working fine on both as stand alone mode and in root-config mode.
Since this Micro Front End application will be used/...
1
vote
1
answer
234
views
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 ...
0
votes
0
answers
19
views
Cannot find module '@react-mf/root-config' from 'src/helpers/api_helpers
While testing react app by yarn test command I'm getting this error and this error
3
votes
1
answer
164
views
Single-spa `cannot set properties of undefined` on hot reload
I'm using vue-2 project inside of single-spa application, and I'm getting this error on every HOT reload for the project. Although the reload itself seems to work fine.
0
votes
0
answers
74
views
Vue - error loading assets and chunks when app.js has query params
I'm working on an frontend application with multiple Vue 2 apps, using single-spa framework.
The build from each Vue app is outputted to dist/ folder and then uploaded to a S3 bucket. The final ...
1
vote
0
answers
203
views
conflict with styled component classes + antd classes in a single spa microfront application
I'm in a project with a microfront application using single-spa, styled-components and antd.
The problem is:
I have a component with styled components
When I go to another url/application and come ...
0
votes
1
answer
78
views
Webpack React - component issue
I already install the 'yarn add cdbreact' and 'yarn add react-router-dom' but why I am having this error?
This is my code in Sidebar.js
const Sidebar = () => {
return (
<div
style={{ ...
1
vote
0
answers
41
views
Reactjs Single-spa CssSyntaxError
In my webpack.config.js I put the code for css-loader and file-loader after I install them
return merge(defaultConfig, {
module: {
rules: [
{
test: /\.css$/i,
...
0
votes
1
answer
130
views
Render 2 micro-frontend on the same page (root)
I'm struggling with the following scenario when using micro-frontend architecture :
I have a first micro-frontend used to do some search (by exemple I look for persons), I have another micro-frontend ...
0
votes
0
answers
44
views
SSPA: How can we have same npm package with two different versions in each single-spa application
I have multiple small Singla SPA react apps working together, there is also a NPM package with react components, some functions, etc. Basically that NPM package contains shared code used across all ...