使用@memotion/request with Vite时道具"css"的值无效

Question

当在react应用程序中使用Vite作为bundler时，我在Storybook中找不到任何关于如何使@memotion/reflect工作的信息。

我几乎在每个故事中都会出现类似Invalid value for prop 'css' in <div> tag的错误。尽管如此，@memotional/reflect对网络应用程序本身来说运行良好。

这是我的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

该解决方案在故事书构建器vite的github页面中找到。