Storybook with Vite error: fn.apply is not a function

Question

我正在重构来自 CRA to using Vite and having issues with Storybook 的 React 网络应用程序。故事书的 GUI 打开，我在左侧面板上看到故事列表。但无论我选择哪个故事，我都会在 Canvas 选项卡中收到错误 TypeError: fn.apply is not a function，如下所示：

我在Storybook的GitHub上发现了类似的问题，并尝试将所有故事中的名称StorybookName更改为storybookName，并检查了故事中的所有React组件以制作确保它们都被正确定义为函数。

当它使用 CRA storybook 时工作正常，但使用 Vite 时它不起作用。也许我缺少 Vite 的一些配置，所以这也是我的 vite.config.js：

import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';

const path = require('path');

export default defineConfig({
  esbuild: {
    jsxFactory: 'jsx',
    jsxInject: `import { jsx } from '@emotion/react'`,
  },
  optimizeDeps: {
    include: ['@emotion/react'],
  },
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
    svgrPlugin({
      svgrOptions: {
        icon: true,
      },
    }),
  ],
});

这是来自故事书的 main.js：

const path = require('path');
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) => {
    return {
      ...config,
      plugins: [
        ...config.plugins,
        svgrPlugin({
          svgrOptions: {
            icon: true,
          },
        }),
      ],
    };
  },
};

在 Chrome 开发工具中我得到这个错误：

Answer 1

找到原因了，看来之前的配置都是正确的。问题在于我如何为 Storybook 应用装饰器之一。基本上，我没有正确导出其中一个装饰器，因此应用了 undefined 而不是装饰器。

因此，对于遇到此问题的任何人，请注意，大多数情况下这是语法问题。检查所有函数、组件、装饰器等，确保它们都已正确定义和导出。

错误消息本身并没有给出任何挖掘的线索，这是一个很大的耻辱，所以这个很难调试。

Storybook with Vite error: fn.apply is not a function

Storybook with Vite error: fn.apply is not a function

reactjs

storybook

vite