Storybook: Storybook broken when no React import with new JSX transform from react > 16.14.0

Created on 23 Oct 2020 · 16Comments · Source: storybookjs/storybook

Describe the bug
React 16.14.0 introduced the new JSX transform, which means you don't have to import React when when you use JSX anymore. Sadly, I am not able to remove any import from the components/stories used in storybook. Did I miss something ? 🤔

To Reproduce
Steps to reproduce the behavior:

Create a new React app npx create-react-app my-app && cd my-app
Check that it's on React > 16.14 (should be)
Add storybook npx sb init
Run storybook npm run storybook
Remove the import React from 'react' from the .stories.js or .js file of one component and go to the story of this component (you might need to disable the react/react-in-jsx-scope eslint rule)
It breaks 💥 React is not defined

Expected behavior
A beautiful and shiny story ✨

Screenshots

System

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8557U CPU @ 1.70GHz
  Binaries:
    Node: 14.13.0 - ~/.nvm/versions/node/v14.13.0/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.13.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Safari: 13.1.2
  npmPackages:
    @storybook/addon-actions: ^6.0.26 => 6.0.26
    @storybook/addon-essentials: ^6.0.26 => 6.0.26
    @storybook/addon-links: ^6.0.26 => 6.0.26
    @storybook/node-logger: ^6.0.26 => 6.0.26
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.26 => 6.0.26

I also tried with storybook 6.1.0-alpha.28, same results

P0 react babel / webpack bug has workaround

Source

xavier-villelegier

👍3

Most helpful comment

Problem is with @storybook/react. It adds the @babel/preset-react preset without the requisite runtime: 'automatic' option set.

This worked for me:

// main.js
module.exports = {
  // ...
  babel: async (options) => ({
    ...options,
    presets: [
      ...options.presets,
      [
    '@babel/preset-react', {
      runtime: 'automatic',
    },
        'preset-react-jsx-transform' // Can name this anything, just an arbitrary alias to avoid duplicate presets'
      ],
    ],
  }),
};

RookY2K on 23 Oct 2020

❤5

All 16 comments

Problem is with @storybook/react. It adds the @babel/preset-react preset without the requisite runtime: 'automatic' option set.

This worked for me:

// main.js
module.exports = {
  // ...
  babel: async (options) => ({
    ...options,
    presets: [
      ...options.presets,
      [
    '@babel/preset-react', {
      runtime: 'automatic',
    },
        'preset-react-jsx-transform' // Can name this anything, just an arbitrary alias to avoid duplicate presets'
      ],
    ],
  }),
};

RookY2K on 23 Oct 2020

❤5

What are the implications of building this option into storybook? Would it be a breaking change?

shilman on 23 Oct 2020

This depends on how React versions without the new jsx transforms would handle the 'automatic' runtime. I'd have to do some testing to figure that out. ~Don't have the time at the moment, but if no one else has confirmed this by the time I roll back around, I can check.~

Edit I lied.. I took the few seconds required to downgrade my React version to 16.13.1 and the build failed with

Module not found: Error: Can't resolve 'react/jsx-runtime'

So it appears that this would be a breaking change unless you made it configurable and defaulted to the classic runtime.

RookY2K on 23 Oct 2020

Create React App, Next.js and Gatsby have already supported new JSX transform.

https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#create-react-app

Here is a Next.js implementation example.

_Auto enable React's new JSX transform on 17.x_

https://github.com/vercel/next.js/pull/16603

matamatanot on 24 Oct 2020

Looks like this is also breaking our CI on CRA4:

info => Modifying Create React App rules.
info => Using default Webpack setup.
info => Compiling preview..
ERR! => Failed to build the preview
ERR! 
ERR! src/App.js
ERR!   Line 6:5:    'React' must be in scope when using JSX  react/react-in-jsx-scope
ERR!   Line 7:7:    'React' must be in scope when using JSX  react/react-in-jsx-scope
ERR!   Line 8:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
ERR!   Line 9:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
ERR!   Line 10:16:  'React' must be in scope when using JSX  react/react-in-jsx-scope
ERR!   Line 12:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope

https://app.circleci.com/pipelines/github/storybookjs/storybook/14162/workflows/7f23260d-a9ce-445b-92fd-c15fd98b97c7/jobs/269075

shilman on 24 Oct 2020

Matthew,

In regards to a computer/ laptop that’s not going to be an option mine recently broke, and on anyone who else is involved could be storybooks.

But I look forward to our call, and the savings plan is right, just don’t understand why I have so many accounts open

Richard Voyles

On Oct 23, 2020, at 11:10 AM, RookY2K notifications@github.com wrote:

Problem is with @storybook/react. It adds the @babel/preset-react preset without the requisite runtime: 'automatic' option set.

This means you cannot just add the @babel/preset-react to the babel property in your main.js.

A hacky workaround that worked for me:

// main.js
module.exports = {
// ...
babel: async (options) => {
const reactPresetIndex = options.presets.findIndex((preset) => preset.includes('preset-react'));
const presetsWithoutReact = [
...options.presets.slice(0, reactPresetIndex),
...options.presets.slice(reactPresetIndex + 1),
];
return {
  ...options,
  presets: [
    [
'@babel/preset-react', {
  runtime: 'automatic',
},
],
...presetsWithoutReact
],
};
},
};
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

RichardVoyles09 on 24 Oct 2020

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.30 containing PR #12899 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

shilman on 26 Oct 2020

NOTE: this is hopefully fixed in 6.1 ☝️ . We need to get it back into the stable release, but are having problems with repros in CI. In the meantime if people can upgrade to 6.1 to test it out, please give it a try and report back:

npx sb upgrade --prerelease

If it doesn't work right away, try removing & regenerating lockfiles.

shilman on 26 Oct 2020

👍1

Upgrading to latest alpha fixed my issue. Will now patiently wait until the fix gets merged into the stable release.

Thanks!

RookY2K on 26 Oct 2020

🎉1

I have a similar problem in browser console:

ReferenceError: _jsx is not defined

My packages versions:

{
    "@storybook/addon-docs": "^6.1.0-alpha.31",
    "@storybook/react": "^6.1.0-alpha.31",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
}

main.js file:

module.exports = {
  stories: ['../src/components/**/*.stories.tsx'],
  addons: ['@storybook/addon-docs'],
  webpackFinal: (config) => {
    config.resolve.plugins.push(new TsconfigPathsPlugin());

    return config;
  }
};

This problem exists only after production build. No problem in "start-storybook" mode

_Edit_ I removed @storybook/addon-docs from the list of addons and the error was removed. Apparently, the reason for the error in this addon

DiFuks on 28 Oct 2020

I'm getting the same error that @DiFuks is getting, _jsx is not defined.

I've created a small repo where you can reproduce this bug: https://github.com/nandosangenetto/storybook-bug-repro

I've tried to remove all addons, as @DiFuks did, but it didn't work.

What is odd is that it works when I run npm run storybook (start-storybook -p 6006), but fails when I try to build it with npm run build-storybook (build-storybook).