Storybook Canvas: 'ReferenceError: react is not defined'

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

If you use new versions of Storybook, it uses SWC compiler by default and you need to change config a little bit. enter link description here

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

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