-
-
Notifications
You must be signed in to change notification settings - Fork 141
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How use with Vite.js, especially displayName for debugging. #350
Comments
I suggest using https://www.npmjs.com/package/vite-plugin-babel-macros and importing from |
Hi @rockwotj, please could you share your code how you set it up? I have this config // vite.config.ts
import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import macrosPlugin from "vite-plugin-babel-macros"
export default defineConfig({
plugins: [
reactRefresh(),
macrosPlugin(),
],
}); And then I just import from // App.tsx
import styled from 'styled-components/macros'; But I get a Typescript error and error from Vite.
Thanks! |
Looks like it's not installed. Did you run npm install? |
Oh my bad, I was using plural |
@ronaldruzicka I added the macros plugin and started importing styled like this: But I still don't get proper class names, they are still randomized/minified. Is there anything else I should do? |
@IvanBernatovic you need to have a config file to get display names, see the docs for more: https://styled-components.com/docs/tooling#experimental-config |
@IvanBernatovic I didn't use any other config. I just included that I have these versions:
But maybe try that experimental config as well. |
@rockwotj @ronaldruzicka Thank you for your responses! I tried to add config as per styled-components docs but it still didn't work. I tried many things but in the end, solution was even simpler than this approach. This is what worked for me in vite.config.js: // vite.config.js
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
'babel-plugin-styled-components',
{
displayName: true,
fileName: false
}
]
]
}
})
]
}) No need to install any other plugin for babel macros (nor vite nor babel macros plugin) and no need to change exports to |
@IvanBernatovic |
Unfortunately, I can't help you with that as I don't have this setup (vite+typescript+styled-components) so I can't tinker around with config. Maybe if you had a reproducible example (a repo or codesandbox project) I could take a look. Did you try other approaches from previous comments? |
@velsa That's a known peculiarity of tsx. For generics you can use |
Just connecting some dots, this was almost certainly because of styled-components/styled-components#3635 |
Btw, for anyone interested, I eventually did the following: plugins: [
// For all styled components:
// create classnames from fileName and displayName in development
react({
babel: {
presets: ['@babel/preset-typescript'],
plugins: [
'@babel/plugin-transform-typescript',
[
'babel-plugin-styled-components',
{
ssr: false,
pure: true,
displayName: true,
fileName: false,
},
],
],
},
}),
]; I added vite react plugin which accepts babel configuration and I am also doing TS transform ( This approach seems to play nicely with vite ) |
displayName worked fine with the babel macros described above but I had some issues with the css prop. In the end what worked for me is
and then import using Note that macros plugin is added before react plugin.
Hope this helps someone. |
not working on production. |
This works for me too, but needed to also add react({
babel: {
plugins: [
['babel-plugin-styled-components', { ssr: false, pure: true, displayName: true, fileName: true }]
]}}) On the other hand I am not confident if this is proper solution or some kind of ugly thing we all hate from CRA (Rewire/Craco). Would be nice if Vite would be able to support such basic styled-components functionality out of the box or at least have documented how to do it correctly. |
Hey, I'm trying to use export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
"babel-plugin-styled-components",
{
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
},
],
],
},
}),
macrosPlugin(),
],
}) How can I fix it? Thanks! |
Hi guys In the example above I need to have styles assigned to This is the code that generated this example:
and this is the config in
|
@MeLlamoPablo works for me, thanks. |
I also got the same issue my vite-config doesn't change anything it remains the same when I install vite.
I try a lot of things to solve this issue but till now I can't able to solve this issue in my system.
I also installed the babel macros but the issue is not solved code app.js :
issue :
|
Disabling |
Just leaving this for anyone stuck like I was. I needed an older version of styled-components in order to get the /macro folder working with my Vite/React/Styled-components project. The version I settled on was 5.3.0. I believe the folder was removed in v6.1 because of low usage. After getting the correct version, a compilation of the advice above worked for me. |
So In 2024, what is the way to get this working? I have spent about two hours messing around with this and I still simply get an error every time I try to spin up my app. Debugging is terrible. Why is this a separate package and not a config for the base library? Who doesn't need readable class names when debugging? |
I'm using the [
'@swc/plugin-styled-components',
{
displayName: true,
fileName: true,
ssr: false,
},
] So basically no babel plugin, but if you can make the switch, this works perfectly fine. |
@Sheraff Thanks for the pointer. For me, unfortunately, it gives me a deadlock when trying to build, no idea why. Would love to hear if it happens to anyone else and if they could resolve it. |
@aesy You're not alone, @vitejs/plugin-react-swc doesn't seem to do the trick for me. During development, |
I am getting this error This is the config i am using import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { nodePolyfills } from 'vite-plugin-node-polyfills'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react({
plugins: [[
"@swc/plugin-styled-components",
{
displayName: true,
ssr: true
}
]]
}), nodePolyfills()]
}) This error only comes up when i add |
For those having trouble with
(Edit: I think maybe I was getting an error because I forgot to install @swc/core perhaps? latest @swc/core isn't working with @swc/[email protected], it errors out on build with:)
BackgroundI've been trying to find a good replacement for create-react-app, all the new ones (next.js, remix, expo) can't be hosted at a /unknown-at-build-time/subpath/ - BrowserRouter doesn't work with relative paths ( So since I have to use HashRouter, this limits me to vite, parcel, or create-react-app. And it seems parcel does not work with @swc/plugin-styled-components at the moment (it doesn't seem to parse Parcel works too, but that would require babel, which would probably have the same relative performance as CRA. I'm concerned about Vite hitting the 10 download concurrent limit for lots of files in a large project, but I'm willing to check out SWC's performance for a bit since I already know the capabilities of babel and parcel (though not babel + parcel yet) I'm trying to retain usage of styled-components since it has the vendor prefixing that I'd like to have automatically - some of these other built-in CSS solutions for CRA alternatives don't seem to have that, and I have to support older hardware. I've used PostCSS in the past, but styled-component vendor prefixing automatically and the automatically generated displayName (vs emotion's manual labeling) make styled-components kind of unreplaceable at the moment. (Note: For SSR frameworks, only next.js with page routing seems to do SSR styled-components well. Next.js w/ app routing requires 'use client'. Remix generate SSR CSS too, but requires some Error Boundary files (ie SolutionsThe solutions below all show SWC Config 👍install
vite.config.js:
package.json
Babel Config 👍install
vite.config.js
package.json
Babel Macros Config (depreciated, macros removed in styled-components 6) 🛑install
vite.config.js
package.json
usage
More options? |
Thank you all for your responses. I am hesitant to bind myself to old versions, and as I am beginning a new project, I think I will simply opt for a different way to manage styling inside of React rather than using styled components. |
@bambery after some investigation I was able to get it working with the latest @swc/plugin-styled-components |
When using with CRA, its possible to see name of component inside css classes, but I cannot figure out how to make a nice developing/debugging experience when using with Vite.js. Is there any advices how to show in classes names of components when using with Vite.js?
The text was updated successfully, but these errors were encountered: