故事书画布：'ReferenceError：未定义反应'

Question

这里是故事书的新手。

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

react 未定义 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/runtime~main.iframe.bundle.js:106:38)

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

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

Answer 1

尝试在您的

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'

属性

Answer 2

我遇到了同样的问题，尝试将其复制到您的

.storybook/main.js

配置中。希望这也适合你。

module.exports = {
  // You will want to change this to wherever your Stories will live
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/react",
  core: {
    builder: "webpack5",
  },
  webpackFinal: async config => {
    // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
    config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // Use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    config.module.rules[0].use[0].loader = require.resolve("babel-loader")

    // Use @babel/preset-react for JSX and env (instead of staged presets)
    config.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
    ]

    config.module.rules[0].use[0].options.plugins = [
      // Use @babel/plugin-proposal-class-properties for class arrow functions
      require.resolve("@babel/plugin-proposal-class-properties"),

      // Use babel-plugin-remove-graphql-queries to remove graphql queries from components when rendering in Storybook
      // While still rendering content from useStaticQuery in development mode
      [
        require.resolve("babel-plugin-remove-graphql-queries"),
        {
          stage: config.mode === `development` ? "develop-html" : "build-html",
          staticQueryDir: "page-data/sq/d",
        },
      ],
    ]

    return config
  },
}

Answer 3

对我来说，解决方案是从 main.js 文件中

删除

以下行：

 // Use correct react-dom depending on React version.
 if (parseInt(React.version) <= 18) {
   config.externals = ['react-dom/client'];
 }

Answer 4

如果您使用新版本的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'
  }
}