将 @emotion/react 与 Vite 一起使用时，prop `css` 的值无效

Question

我找不到任何关于如何将 @emotion/react work in Storybook when using Vite 作为 React 应用程序中的捆绑器的信息。

我几乎在每个故事中都会遇到 Invalid value for prop 'css' in <div> tag 这样的错误。即使如此，@emotion/react 对于 webapp 本身也能正常工作。

这是我的 vite.config.js 配置：

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

这是我的 main.js 故事书：

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

在 storybook-builder-vite's github page here 中找到了解决方案。

将 @emotion/react 与 Vite 一起使用时，prop `css` 的值无效

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

reactjs

storybook

vite

emotion