Can't get emotion's css prop working inside storybook

Describe the bug I can’t seem to get emotion’s css prop to work inside of Storybook. Seems like emotion is now the dominant css-in-js library, and the css prop is emotion’s recommended primary way of styling components, so I thought I was choosing a well-travelled happy path here, but I’m stuck. I’m very open to the fact that I’m doing something dumb though, of course.

In my actual project repo I’m getting the same thing described here and here. I tried all of the recommendations in both those threads, and still no joy – and it looks like I’m not the only one.

So, I created a brand new React Storybook repo to just hello-world using emotion css prop and storybook. And I can’t get that to work either! I’m wondering if someone could look at the super simple repro repo I made and tell me where I went wrong, here it is:

https://github.com/jaredh159/storybook-emotion-css

I’d be up for submitting a PR to the docs clarifying how to do this, if someone can show me where I messed up.

To Reproduce Steps to reproduce the behavior:

1. git clone [e-mail]:jaredh159/storybook-emotion-css.git
2. cd storybook-emotion-css && yarn && yarn storybook
3. Load http://localhost:6016 and see the error 😦

TypeError: Cannot read property 'name' of null

Expand for full error message

ERROR in ./src/CssPropButton.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'name' of null
   at getDeclaratorName (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:212:32)
   at getIdentifierName (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:267:24)
   at getLabelFromPath (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:190:19)
   at transformExpressionWithStyles (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:450:19)
   at transformCssCallExpression (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:708:31)
   at /test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:797:9
   at Array.forEach (<anonymous>)
   at /test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:796:26
   at Array.forEach (<anonymous>)
   at Object.emotionCoreMacroThatsNotARealMacro [as @emotion/core] (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:794:27)
   at PluginPass.ImportDeclaration (/test-repo/node_modules/babel-plugin-emotion/dist/babel-plugin-emotion.cjs.dev.js:891:45)
   at newFn (/test-repo/node_modules/@babel/traverse/lib/visitors.js:193:21)
   at NodePath._call (/test-repo/node_modules/@babel/traverse/lib/path/context.js:53:20)
   at NodePath.call (/test-repo/node_modules/@babel/traverse/lib/path/context.js:40:17)
   at NodePath.visit (/test-repo/node_modules/@babel/traverse/lib/path/context.js:88:12)
   at TraversalContext.visitQueue (/test-repo/node_modules/@babel/traverse/lib/context.js:118:16)
@ ./stories/index.stories.js 5:0-49 6:143-156
@ ./stories sync \.stories\.js$
@ ./.storybook/config.js
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

Expected behavior I expected to be able to use the css prop from emotion within Storybook.

Code snippets The repro repo does add a .babelrc inside the stories dir as recommended in the emotion docs and on this similar issue, like so:

{
  "presets": ["@emotion/babel-preset-css-prop"]
}

I also tried this workaround, but no joy.

System:

• OS: Mac
• Device: Macbook Pro 2015
• Browser: Chrome
• Framework: React
• Version: 5.1.9

[jeongsd]

I fixed it with the settings below. Hope it helps someone.

pacakge.json

"react": "^17.0.1",
"react-dom": "^17.0.1",
"@storybook/react": "^6.1.21",
"@emotion/react": "^11.1.2",
"typescript": "^4.1.3",

.storybook/main.js

module.exports = {
  reactOptions: {
    fastRefresh: true,
    strictMode: true,
  },
  stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal: async (config) => {
    config.module.rules[0].use[0].options.presets = [
      require.resolve('@babel/preset-env'),
      require.resolve('@babel/preset-typescript'),
      [
        require.resolve('@babel/preset-react'),
        {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      ],
    ]

    config.module.rules[0].use[0].options.plugins = [
      ...config.module.rules[0].use[0].options.plugins,
      '@emotion/babel-plugin',
    ]

    return config
  },
}

[illinar]

@DominicTobias-b1 — recently upgraded to Emotion 11 with the latest storybook (6.1.xx). Here are the relevant details of my setup. We are using recent Typescript (4.1.x) + Babel (7.12.x), so YMMV depending on your setup.

I switched my components to use new “automatic” React JSX transform. I find this the only reasonable and clean way forward. Note: this requires Typescript 4.1 or higher (see https://emotion.sh/docs/emotion-11#css-prop-types)

In babel configuration add runtime and importSource, and @emotion/babel-plugin. Excerpt:

{
  "presets": [
    [
      "@babel/preset-react", {
        "runtime": "automatic",
        "importSource": "@emotion/react",
      }
    ],
  ],
  "plugins": [
     "@emotion"
  ]
}

In Typescript configuration (tsconfig.json) add:

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@emotion/react"
  }
}

We keep jsx: preserve, since we are not using Typescript to transform JSX, but Emotion babel plugin.

Storybook is still using Emotion 10 and depends on the “classic” React JSX transformation so you have to add custom babel configuration under .storybook folder that will use babel-preset-css-prop. Here is excerpt of .storybook/babel.config.js:

module.exports = {
  presets: [
    "@emotion/babel-preset-css-prop"
  ]
};

Also see discussion under #13145