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

Grevera

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

Sodality

Best answer, should be the validated one – Millstream

Thanks a lot, saved me a couple hours of debugging 😅 – Oudh

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

Dual

Thanks Ferran. I've added the snippet you shared, but i'm still getting the same error as before. I've updated the repo with your snippet. – Grevera

It doesn't work. Seems like babel config does nothing whatsoever. Neither presets nor plugins help with this issue. But answer of @y0na24, about swc options, does work. – Reverential

This did indeed work for me. Thank you Ferran. If you are using React + babel then use this. Otherwise, use the SWC setup. – Mhd

Answer 3

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

Papyrology

Answer 4

For me the solution was to remove the following lines from the main.js file:

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

Metatarsus

Answer 5

This worked for me:

swc: () => ({
  jsc: {
    transform: {
      react: {
        runtime: 'automatic'
      }
    }
  }
}),

Cassaundracassava

Answer 6

I had the same problem just now. The fix for me was simply adding this to the .storybook/preview.js file:

import * as React from 'react'

For context, here's my setup:

• [email protected] (quite old now, corp constraint)
• webpack@4
• craco@6

Also: I stumbled upon this problem just by upgrading from Node.js 16 to Node.js latest (v22 at the time). For whatever wacky reason, React was implicitly loaded in scope previously when running Storybook, now it's not, so I gotta explicitly import it - happy to hear more insights / pointers on this from anyone

PS: I add this answer only to potentially help someone else with the same issue - not guaranteeing it'll work for everyone.

Bravissimo