#Emotion stop working after update to storybook 7

1 messages · Page 1 of 1 (latest)

raven nexus
#

Hi, I have issue related to inject css from emotion after update to 7. in component witch I use I recive error like:

"You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop)."

before update everything worked well, styles were injected, I also use "@emotion/babel-preset-css-prop"
here same issue described on stackovetflow https://stackoverflow.com/questions/76236622/emotion-css-prop-doesnt-work-in-storybook-v7

react: 18, storybook 7.0.24, emotion/babel-preset-css-prop 11 , emotion 11

here is my main.js

const path = require("path"); module.exports = { stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], typescript: { reactDocgen: 'none' }, addons: ["@storybook/addon-links", "@storybook/addon-essentials"], webpackFinal: async (config, { configType }) => { // Return the altered config config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, "../src")]; return config; }, framework: { name: "@storybook/react-webpack5", options: {} }, docs: { autodocs: true } };

.babelrc

{ "presets": ["@babel/preset-typescript", "@emotion/babel-preset-css-prop"], "plugins": [ ["@emotion"], ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": false }], ["@babel/plugin-proposal-optional-chaining"], ["@babel/proposal-object-rest-spread"] ] }

any ideas what I doing wrong? 🙂

raven nexus
#

nothing? 😦 without any hints?

zinc cedar
#

Hey @raven nexus 👋 Let's take a peek at what might be happening 🙂

#

Apologies for the wait, this is a community discord with people in different timezones. Sometimes it can take a little with for someone with the context to look at your problem

#

From what I can tell, Emotion's documentation suggests using either the @emotion/babel-preset-css-prop preset OR the @emotion plugin but NOT both.

#

try updating your .babelrc to something like this:

{
  "presets": [
    "@babel/preset-typescript",
    "@emotion/babel-preset-css-prop"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      { "legacy": true },
    ],
    [
      "@babel/plugin-proposal-class-properties",
      { "loose": false }
    ],
    ["@babel/plugin-proposal-optional-chaining"],
    ["@babel/proposal-object-rest-spread"]
  ]
}
raven nexus
#

I applied your suggestion and it is still same result. The most weird thing is about, its worked well until update to storybook 7.