Comments (21)
@Jack-Works, I submitted a PR to enable transparent support of custom cache.
Wether it get merged or not however I guaranty support of custom cache within a week.
from tss-react.
Sorry about the delay. I am releasing the feature as soon as the PR get merged on emotion
from tss-react.
Done,
$ yarn add [email protected] @emotion/cache @emotion/react @emotion/serialize @emotion/utils
Sorry I was eager to push this feature out of the door but it wasn't ready yet.
Working on resolving the mui integrations issues.
from tss-react.
Oh, I found there is still a problem here. Now tss-react works but mui styles are all breaking.
Both happening in 0.6.0 or 0.6.0-beta.1. Let me try to fix this locally
from tss-react.
I've fixed this locally again by editing the lock file manually and playing around with node_modules
. 😂
from tss-react.
I'm glad you fixed it but it bothers me. Not everyone will have the skill to hack the lock file like you did.
I can't reproduce withyarn
. Maybe there is just a simple keyword likeresolve
to put in thepackage.json
that will make it work with pnpm.
Thanks, but I can't tell how did I fix this exactally, our project is open sourced on GitHub. I guess you may be interested in it. DimensionDev/Maskbook@294b23a is the bad commit and in DimensionDev/Maskbook@ec225ca I fixed it by only changing package.json
and pnpm-lock.yaml
. But our project is hard to set up.
from tss-react.
The current code requires the cache to be provided ahead-of-time instead of reading it from the CacheProvider
https://github.com/garronej/tss-react/blob/main/src/createMakeStyles.tsx
from tss-react.
Ok, I understand, sorry for overseeing that.
from tss-react.
Cool thank you!
from tss-react.
The change have been approved. It should be merged soon.
from tss-react.
@Jack-Works Everything should work now. Let me know if it isn't the case 😊
Doc
from tss-react.
hi, @garronej I tried the latest version, it still not working and I got this:
You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.
pnpm why @emotion/react -r
Legend: production dependency, optional only, dev only
Workspace Root
dependencies:
@emotion/react 11.4.1
@emotion/styled 11.3.0
└── @emotion/react 11.4.1 peer
@material-ui/core 5.0.0-alpha.34
├── @emotion/react 11.4.1 peer
├─┬ @emotion/styled 11.3.0 peer
│ └── @emotion/react 11.4.1 peer
└─┬ @material-ui/styled-engine 5.0.0-alpha.34
├── @emotion/react 11.4.1 peer
└─┬ @emotion/styled 11.3.0 peer
└── @emotion/react 11.4.1 peer
@material-ui/icons 5.0.0-alpha.34
└─┬ @material-ui/core 5.0.0-alpha.34 peer
├── @emotion/react 11.4.1 peer
├─┬ @emotion/styled 11.3.0 peer
│ └── @emotion/react 11.4.1 peer
└─┬ @material-ui/styled-engine 5.0.0-alpha.34
├── @emotion/react 11.4.1 peer
└─┬ @emotion/styled 11.3.0 peer
└── @emotion/react 11.4.1 peer
@material-ui/lab 5.0.0-alpha.34
└─┬ @material-ui/core 5.0.0-alpha.34 peer
├── @emotion/react 11.4.1 peer
├─┬ @emotion/styled 11.3.0 peer
│ └── @emotion/react 11.4.1 peer
└─┬ @material-ui/styled-engine 5.0.0-alpha.34
├── @emotion/react 11.4.1 peer
└─┬ @emotion/styled 11.3.0 peer
└── @emotion/react 11.4.1 peer
@masknet/theme packages\theme
dependencies:
tss-react 0.5.2
└── @emotion/react 11.4.1
I guess you should list @emotion/* packages as peer dependencies instead of direct dependencies?
from tss-react.
Oh @material-ui/styled-engine are using 11.4.0 and tss-react using 11.4.1, let me try to fix this in our lockfile
from tss-react.
Changed resolution to 11.4.1 but still getting this problem, I guess peer
is required
from tss-react.
Ok,
Sorry for not testing this out with @material-ui/styled-engine
Changed resolution to 11.4.1 but still getting this problem, I guess peer is required
This is surprise me a lot.
As mentioned by @oliviertassinari here the problem is more complicated that it seems...
I will sort this out and come back with a solution.
from tss-react.
Thanks! And I'm using pnpm workspace (that might affect the result)
from tss-react.
Can you release an experimental version with peers so that I can test it by myself
from tss-react.
Thanks! I have tried 0.6.0-beta.1, it fixes our problem!
from tss-react.
Thanks for reporting it working.
I really hate to make @emotion/cache
, @emotion/react
, @emotion/serialize
, and @emotion/utils
peer dependency though.
Problem being that @emotion is spitted into multiple little packages.
Using yarn packages are correctly deduped.
I would highly appreciate if you could give me the step to reproduce the error in your pnpm
project so I can investigate the error and see if there isn't a better way than making everything a peer dependency.
from tss-react.
Hi @Jack-Works,
In v0.6.0 there is a more exhaustive cache
support.
The build is also much more carefully tested that the one I released in the hurry Sunday, in particular with the mui integration in an SSR context.
Let me know if you have any issue with it.
I've opted to leave only @emotion/react
as dev dependency but I am still interested in reproducing the bug your experienced.
Best
from tss-react.
I'm glad you fixed it but it bothers me. Not everyone will have the skill to hack the lock file like you did.
I can't reproduce with yarn
. Maybe there is just a simple keyword like resolve
to put in the package.json
that will make it work with pnpm.
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.