Invalid value for prop css when using @emotion/react with Vite

[akbarkz]

I reported this error in Storybook's GH, but they redirected me to you guys.

Describe the bug
I couldn't find any information on how to make @emotion/react work in Storybook when using Vite as a bundler in a React application.
I'm getting errors like Invalid value for prop 'css' in <div> tag in almost every story. Even though, @emotion/react is working fine for the webapp itself.

Here's my vite.config.js configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from '@emotion/react'`,
  },
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
});

And here's my main.js for Storybook:

const svgrPlugin = require('vite-plugin-svgr');

module.exports = {
  core: {
    builder: 'storybook-builder-vite',
  },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  viteFinal: (config, { configType }) => {
    config.define = {
      'window.process': {
        env: {
          NODE_ENV: configType.toLowerCase(),
        },
      },
    };
    return {
      ...config,
      plugins: [
        ...config.plugins,
        svgrPlugin({
          svgrOptions: {
            icon: true,
          },
        }),
      ],
    };
  },
};

To Reproduce
Sorry, I failed with trying to create a reproducible repository.
Versions of packages that I use:
react - 16.14.0
@emotion/react - 11.7.1
@emotion/babel-plugin - 11.7.1
storybook-builder-vite - 0.1.11
vite - 2.7.3
vite-plugin-svgr - 0.6.0
@vitejs/plugin-react - 1.1.3

System
Environment Info:

System:
OS: Linux 5.6 Ubuntu 20.04.3 LTS (Focal Fossa)
CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
Binaries:
Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
Yarn: 1.19.1 - /usr/bin/yarn
npm: 6.14.10 - ~/.nvm/versions/node/v14.15.4/bin/npm
Browsers:
Chrome: 95.0.4638.69
Firefox: 94.0
npmPackages:
@storybook/addon-actions: ~6.3.8 => 6.3.12
@storybook/addon-essentials: ~6.3.8 => 6.3.12
@storybook/addon-links: ~6.3.8 => 6.3.12
@storybook/node-logger: ~6.3.8 => 6.3.12
@storybook/react: ~6.3.8 => 6.3.12

Additional context
There are ways how to make @emotion/react work when one is using Webpack as a bundler, but unfortunately I couldn't find anything related to Vite.

[velopert]

#210 might solve your issue.

[akbarkz]

Thanks! I'm closing this issue as the suggested solution resolved it.