故事书 Canvas：“ReferenceError：未定义反应”

Question

Newbie to Storybook here.

I'm trying to integrate Storybook into my Gatsby front end. However, when trying to preview the test components in Storybook Canvas I get the following error:

react is not defined ReferenceError: react is not defined at react-dom/client (http://localhost:6006/main.iframe.bundle.js:1970:18) at webpack_require (http://localhost:6006/runtime~main.iframe.bundle.js:28:33) at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21) at webpack_require .t (http://localhost:6006/runtime~main.iframe.bundle.js:106:38)

I'm able to see the component preview in Storybook Docs but not in Storybook Canvas.

Link to repository: https://github.com/akarpov91/gatsby-tutorial

Answer 1

Try adding the following snippet in your main.js :

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

Apparently, @storybook/react adds @babel/preset-react without runtime: 'automatic' property

Answer 2

I have had the same problem, try copying this into your .storybook/main.js config. Hope this works for you too.

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
  },
}