使用@情感/与Vite反应时道具` for‘的无效值

Question

当将@情感/反应用作React应用程序中的绑定程序时，我找不到任何关于如何使维特在故事书中工作的信息。

几乎在每一个故事中，我都会遇到像Invalid value for prop 'css' in <div> tag这样的错误。尽管如此，@情感/反应对于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

该解决方案在故事书建造者-维特的github页面这里中找到。