React new JSX transform doesn't work with custom addons on 6.1.10

[aizerin]

Describe the bug
I tried to use new JSX transform in my project and it works with normal code, but it fails in addons. I created MWE: https://github.com/aizerin/sb-addon-react-bug and basically, it just contains plain CRA and SB with one custom addon located here: https://github.com/aizerin/sb-addon-react-bug/tree/master/.storybook/addon

ERR! Runtime error! Check your browser console.
ERR! ReferenceError: React is not defined

To Reproduce

1. clone https://github.com/aizerin/sb-addon-react-bug
2. run yarn
3. run 'yarn storybook'
4. See error

Expected behavior
SB will start

System
System:
OS: macOS 11.0.1
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
Browsers:
Chrome: 87.0.4280.88
Firefox: 81.0
Safari: 14.0.1
npmPackages:
@storybook/addon-actions: ^6.1.10 => 6.1.10
@storybook/addon-essentials: ^6.1.10 => 6.1.10
@storybook/addon-links: ^6.1.10 => 6.1.10
@storybook/node-logger: ^6.1.10 => 6.1.10
@storybook/preset-create-react-app: ^3.1.5 => 3.1.5
@storybook/react: ^6.1.10 => 6.1.10

[inthegreenwild]

I'm also facing this issue. All the tutorials on how to create an addon use react hooks and they aren't actually working at all with addons.

[shilman]

Storybook doesn't use the JSX transform yet, so you just need to import React from 'react' at the top of your JSX files. I've verified this works on the repro.

[aizerin]

I tried that and if I put import React from "react"; into ControlPanel.js it gives me the same error.

[shilman]

I tried it in your repo and it worked for me @aizerin. I believe I had to add it to two files.

[agriffis]

I ran into this where my addon reuses components from my main source tree, so I'd rather not be forced into import React

This workaround seems to be working for me in .storybook/main.js:

  managerWebpack: config => {
    config.module.rules.forEach(r => {
      r.use?.forEach(u => {
        u.options?.presets?.forEach((p, i) => {
          if (typeof p === 'string' && p.includes('/@babel/preset-react/')) {
            u.options.presets[i] = [p, {runtime: 'automatic'}]
          } else if (
            Array.isArray(p) &&
            p[0].includes('/@babel/preset-react/')
          ) {
            p[1] = {...p[1], runtime: 'automatic'}
          }
        })
      })
    })
    return config
  },

[rally25rs]

I tried @agriffis 's code on Storybook 6.3.12 and still get React is not defined.
If I console.log the config, I can see runtime: automatic is inserted correctly.

If I look at the js that Storybook generated, it still includes React.createElement

---

Edit:

So I figured this out; I wanted to webpack my own stories with the new JSX engine, which meant I needed to modify the webpack config using webpackFinal, not managerWebpack. That's what I get for copy/pasting 😆

[ndelangen]

This is fixed in storybook 7.0 beta