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

Question

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,
          },
        }),
      ],
    };
  },
};

Answer 1

The solution was found in storybook-builder-vite's github page here.