Storybook v7升级后Emotion CSS Prop失效问题排查求助

将Storybook从v6.5版本升级至v7后，Emotion功能停止工作，多次尝试解决均未成功。渲染组件时，css属性抛出如下错误：

"You have tried to stringify object returned from css function. It isn't supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop)."

相关代码与配置 #

1. Button组件故事文件 (button.stories.tsx) #

import {
  Meta, StoryObj,
} from '@storybook/react';
import { ButtonComponent } from './button.component';

const meta: Meta<typeof ButtonComponent> = {
  component: ButtonComponent,
  title: 'ButtonComponent',
};

export default meta;
type Story = StoryObj<typeof ButtonComponent>;

export const Primary: Story = {
  render: (args) => <ButtonComponent {...args} />,
};

2. 项目结构 #

app
 |-resources
 |     |-js
 |        |-.storybook
 |        |       |-main.js     
 |        |       |-preview.js
 |        |
 |        |-src
 |           |-*whole application here*
 |
 |-.babelrc
 |-package.json
 |-webpack.js   

3. package.json依赖片段 #

"devDependencies": {
    ...
    "@storybook/addon-controls": "7.0.10",
    "@storybook/addon-storysource": "7.0.10",
    "@storybook/addon-styling": "^1.0.7",
    "@storybook/addon-toolbars": "7.0.10",
    "@storybook/preset-typescript": "3.0.0",
    "@storybook/react": "7.0.10",
    "@storybook/react-webpack5": "^7.0.10",
    "storybook": "^7.0.10",
    ...
}

4. .storybook/main.js配置 #

const path = require('path');
module.exports = {
  stories: ['../src/**/*.stories.@(ts|tsx)?'],
  features: {
    emotionAlias: false,
  },
  addons: [
    '@storybook/addon-toolbars',
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json')
        }
      }
    },
    '@storybook/addon-controls',
    {
      name: '@storybook/addon-storysource',
      options: {
        rule: {
          test: /\.story\.tsx?$/,
          include: [path.resolve(__dirname, '../src')]
        },
        loaderOptions: {
          prettierConfig: {
            printWidth: 80,
            singleQuote: false
          },
          parser: 'typescript'
        }
      }
    },
    '@storybook/addon-styling'
  ],
  webpackFinal: async config => {
    config.resolve.modules = [...(config.resolve.modules || []), path.resolve(__dirname, "../src")];
    config.plugins.forEach(plugin => {
      if ('ForkTsCheckerWebpackPlugin' === plugin.constructor.name) {
        plugin.tsconfig = path.resolve(__dirname, './tsconfig.json');
      }
    });
    return config;
  },
  framework: {
    name: '@storybook/react-webpack5',
    options: {}
  },
};

5. .storybook/preview.js配置 #

import { ThemeProvider } from '@emotion/react';
import { darkTheme } from '../src/_shared/themes/dark.theme';

const preview = {
    decorators: [
      (Story) => (
        <div>
          <ThemeProvider theme={darkTheme}>
              <Story />
          </ThemeProvider>
        </div>
      ),
    ],
};

6. .babelrc配置 #

{
  "presets": [
    ["@babel/preset-react", { "runtime": "automatic", "importSource": "@emotion/react" }],
    "@babel/preset-typescript",
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": "3.22"
      }
    ]
  ],
  "plugins": [
    "@emotion",
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-nullish-coalescing-operator",
    "@babel/plugin-proposal-numeric-separator",
    "dynamic-import-node",
    "transform-class-properties"
  ]
}

请问我的配置中是否存在遗漏的问题？

内容的提问来源于stack exchange，提问作者Kremdas