Storybook Canvas：“ReferenceError：未定义反应”

Question

这里是故事书的新手。

我正在尝试将 Storybook 集成到我的 Gatsby 前端中。但是，当尝试在 Storybook Canvas 中预览测试组件时，出现以下错误：

反应未定义ReferenceError：反应未在react-dom / client（http://localhost：6006/main.iframe.bundle.js：1970：18）在webpack_require（http://localhost：6006/runtime〜）定义main.iframe.bundle.js:28:33) 在 fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21) 在webpack_require .t (http://localhost:6006/运行时~main.iframe.bundle.js:106:38)

我可以在 Storybook Docs 中看到组件预览，但不能在 Storybook Canvas 中看到。

链接到存储库： https://github.com/akarpov91/gatsby-tutorial

Answer 1

如果您使用新版本的Storybook，它默认使用SWC编译器，您需要稍微更改配置。在此输入链接描述

const config: StorybookConfig = {
  stories: ['../../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions'
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {
      builder: {
        useSWC: true
      }
    }
  },
  swc: () => ({
    jsc: {
      transform: {
        react: {
          runtime: 'automatic'
        }
      }
    }
  }),
  docs: {
    autodocs: 'tag'
  }
}

Answer 2

尝试在您的 中添加以下代码片段main.js：

module.exports = {
  // ...
  babel: async (options) => ({
    ...options,
    presets: [
      ...options.presets,
      [
    '@babel/preset-react', {
      runtime: 'automatic',
    },
        'preset-react-jsx-transform'
      ],
    ],
  }),
};

显然，@storybook/react添加@babel/preset-react没有runtime: 'automatic'财产