-
Notifications
You must be signed in to change notification settings - Fork 108
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
Using the css Prop of @emotion/react and apply babel plugin #210
Comments
Thanks for the tip! |
Worked very well. Struggled, searched and found this. Thank you. |
Thank you for submitting this! Why doesn't adding: "jsx": "react-jsx",
"jsxImportSource": "@emotion/react" in tsconfig.json work as suggested in emotion docs? |
@bestickley I know it's been awhile since you asked, but in answer to your question: since storybook already defines the react plugin for vite, you have to remove it first, and then re-add it with a custom configuration. If you do not omit the plugin that storybook provides, then vite complains about conflicting plugins. |
Sorry to resurrect this, but I found my way to this guide trying to add Emotion to my Vite Storybook setup. Unfortunately it doesn't seem to work when stories are written in MDX. After making this change all of my MDX stories fail to load, citing: [vite] Internal server error: <path>/<file>.stories.mdx.jsx: importSource cannot be set when runtime is classic. Would welcome some insight. I tried setting |
@terenceodonoghue Did you manage to solve your problem? |
@zygisau I wound up skipping this solution and instead inserting a JSX pragma at the top of every component file. This ensured they would render in MDX without needing to modify the Vite config. // MyComponent.jsx
/** @jsxImportSource @emotion/react */ It's generating a lot of annoying console warnings for each component now... warning: The JSX import source cannot be set without also enabling React's "automatic" JSX transform ...but it works. |
@terenceodonoghue - I was having the same problem and errors trying to get MDX working along side my stories. I saw your solution but I didn't really want to add that pragma to every file in our repo. I ended up trying out the MDX2 Opt-in feature, and the MDX stories started building without issues! Shout out to @IanVS for all the help on Discord. Here is my entire
|
Do you guys can build |
Hey I finally made it. Just upgrade your storybook to latest version (7.0.beta). It respects If @terenceodonoghue is still having this problem, I want you to check my comment. |
I am just submitting this issue so that it can be searched by others.
That's it! Happy coding!!
The text was updated successfully, but these errors were encountered: