Comments (13)
@garronej & @kennyist -- I WIN! Lol.
In the root-config file when registering the sub applications I passed an instance of the createCache & CacheProvider from @emotion, then picked them up from the props rather than importing them in each sub-app (I had several apps all importing their own theme object and assigning classNames). Voila, I now have one muiCache, and the styles are appearing in order, pre-prending the tss
styles, each with their own prefix depending on the sub-app they originated from.
in root-config:
import { registerApplication, start } from "single-spa";
import {
constructApplications,
constructRoutes,
constructLayoutEngine,
} from "single-spa-layout";
import microfrontendLayout from "./microfrontend-layout.html";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
const routes = constructRoutes(microfrontendLayout);
const applications = constructApplications({
routes,
loadApp({ name }) {
return System.import(name);
},
});
const layoutEngine = constructLayoutEngine({ routes, applications });
const applicationsWithProps = applications.map((application) => {
return {
...application,
customProps: { createCache: createCache, CacheProvider: CacheProvider },
};
});
applicationsWithProps.forEach(registerApplication);
layoutEngine.activate();
start();
inside cache provider in every sub app:
import { ReactChild } from "react";
import type { CacheProvider } from "@emotion/react";
import type createCache from "@emotion/cache";
export type Props = {
CacheProvider: typeof CacheProvider;
createCache: typeof createCache;
children?: ReactChild;
};
export function Theme(props: Props) {
const { CacheProvider, createCache, children } = props;
const muiCache = createCache({
"key": "mui", // to test in each sub app I assigned a different "key", they should all show up in one cache
"prepend": false
});
return <CacheProvider value={muiCache}>{children}</CacheProvider>;
};
from tss-react.
@liztownd
@garronej Documentation may need to change if you have made it
Your solution causes single spa inspector
dev tool to not work, infinite loading. This seems like it will happen if you use single spa layout engine.
To fix this, don't create a new array with custom props added (applicationsWithProps
in your example). Add the props to the route constructor like so:
const routes = constructRoutes(microfrontendLayout, {
props: {
createCache: createCache,
CacheProvider: CacheProvider
},
loaders: {
}
});
And then in your layout html file add the props to the application like this:
<application name="@your-app" props="createCache,CacheProvider"></application>
from tss-react.
Hello @kennyist,
Is the code of your your repo open source?
from tss-react.
There is this example of tss-react setup on a SPA: https://github.com/garronej/tss-react/tree/main/src/test/apps/spa
you can run it with:
git clone https://github.com/garronej/tss-react
cd tss-react
yarn
yarn build
yarn start_spa
Regarding why it's not working in your case, I can't know with the fiew informations you provided me.
I think you have multiple copy of @emotion/react
in your dependency and MUI is not picking up your cache. You chan change the key
by something random and go see in the debug devloper console if you see it appear.
I will will gladly debug your depo if you provide me the code or a sandbox.
from tss-react.
Hi @garronej, thanks for the reply. Unfortunately cannot give access to the main repo, But I have made a quick setup in the same style being used at the moment, with it also not working there. This is using single spa for microservice setup.
from tss-react.
Thank you for setting up this sample repo.
Unfortunately I can't get it to run.
I did:
git clone https://github.com/kennyist/tss-react-test
cd tss-react-rest
cd ui
npm install
npm run npm run start:standalone
I am getting this:
Please provide additional informations to help me reproduce the specifical issue you are facing related to tss-react
from tss-react.
Ah sorry, You need to clone the repo and then do this for each sub folder (ui
, root
, page
)
cd tss-react-test
cd <SUB FOLDER>
npm install
npm start
Once all are running at the same time, go to http://localhost:9000. You should then get a MUI
button, This has a className
style to change the background to red that 'MUI' overrides.
from tss-react.
Hi @kennyist,
So, I spend an hour trying to sort this out I understand what the problem is but unfortunately I am not familiar enough with single-spa
to provide a working setup.
The problem is not related to TSS react, @emotion/react
is supposed to be a dependency shared by @mui/material
and tss-react
. Like react
or react-dom
are shared across the App.
In your setup @mui/material
internally uses an other instance of @emotion/react
that you are when you import { CacheProvider } from "@emotion/react"
.
As a result, when you provide you cache with<CacheProvider>
it is never picked up by @mui/material
.
This is a problem not only for TSS but also potentially for other libraries you might be using.
I'd suggest submitting an issue to single-spa
and/or emotion
.
Please let me know it you manage to sort it out.
Best
from tss-react.
Hi @kennyist. Have you find a solution to this?
When this is is done I think the problem will solve itself but still, I would like to figure out why @emotion/react
can't be shared even tho you seems to have setup single-spa well...
from tss-react.
Hi @kennyist - just wanted to check to see if you've had any success with this issue? I'm running into the same thing with my single-spa app (set up very similarly to your test repo you linked above) and cannot make the tss-styles override the MUI generated css-styles (have tried <StyledEngineProvider injectFirst>
as well as the recommended <CacheProvider>
set up). Have you had any luck figuring out a workaround? Thanks!
from tss-react.
Hi @liztownd,
I am sorry I didn't get the chance to try again.
There is still this MUI PR going on that should fix this issue.
For now all I can tell is that this is the root cause:
The problem is not related to TSS react, @emotion/react is supposed to be a dependency shared by @mui/material and >
tss-react
. Like react or react-dom are shared across the App.
In your setup @mui/material internally uses an other instance of @emotion/react that you are when you
import { CacheProvider } from "@emotion/react".
As a result, when you provide you cache with it is never picked up by @mui/material.
If you manage to setup single-spa
in such a way that @emotion/react
is not duplicated in your code, you win.
from tss-react.
@liztownd awesome, nicely done!
Thank you very much for your contribution.
I will add a section in the documentation website.
from tss-react.
@kennyist nice catch! Thank you! I'm new to single-spa (haven't even installed the single spa inspector
dev tools yet) so this is super helpful!
from tss-react.
Related Issues (20)
- How to opt out of RTL transformation? HOT 3
- <GlobalStyles /> don't work properly with next.js app folder HOT 7
- cannot Import multiple makeStyles HOT 1
- Use eslint rule to detect unused classed with imports HOT 2
- React 16.10.0 failed to install @ mui/material HOT 1
- How to use with css and styled apis. HOT 1
- yarn install with pnp mode complains about missing dependency @mui/material HOT 3
- NextJS/MUI/TSS - Cannot read properties of undefined (reading 'classes') HOT 3
- Hard reload after any file change HOT 2
- TssCacheProvider is not working when used with emotion cache and mui 5 HOT 6
- Using with Shadowed Web Components HOT 3
- Next.js: Applying augmentDocumentWithEmotionCache to document breaks AMP pages HOT 2
- The right way typing props when using withStyles HOT 3
- Invalid type for withStyles HOT 4
- Mantine integration
- Using `@import` rule within `<GlobalStyles />` component HOT 8
- `GlobalStyles` create multiple <style data-emotion="css-global">...<style> HOT 1
- Cannot read properties of undefined (reading 'length') in useGuaranteedMemo HOT 3
- MUI V5: Performance issues HOT 4
- Prop `className` did not match. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tss-react.