[Investigation]: Support React 19

[yannbf]

Describe the bug

React 19 has been released. We should investigate all the changes that are needed to fully support it.

• Make sure that React 19 is supported in all packages that have it as peer dependency
  • @storybook/ember
  • @storybook/addon-links
  • @storybook/blocks
  • @storybook/react
  • @storybook/react-vite
  • @storybook/react-webpack5
  • @storybook/react-dom-shim
  • @storybook/react-webpack
  • @storybook/experimental-nextjs-vite
  • @storybook/react-native-web-vite
  • @storybook/nextjs
  • @storybook/icons
• Get react-confetti (dep of @storybook/addon-onboarding) to support React 19: Support React 19 alampros/react-confetti#159
• Make sure React 19 features are tested in sandboxes
• Update usage of act in places like this

To users:

You should be able to use Storybook with React 19, but if you found any inconsistency or unsupported feature, please let us know in this issue.

[JReinhold]

I don't think we want to upgrade any direct dependencies, as that would be a breaking change, at least if we did it in @storybook/addon-docs or storybook.
We also shouldn't upgrade devDependencies in addons, and especially not addon-kit, because the manager will still be using React 18, so the addons' React version is ignored. Meaning if you're building an addon with React 19 APIs, they won't work as soon as that addon is bundled into the manager at runtime.

[ianzone]

it's released now

[silverwind]

Would appreciate if these peerDependencies could be updated to support the released version:

storybook/code/renderers/react/package.json

Lines 96 to 97 in 052f6ce

	"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
	"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",

[yannbf]

Hey @silverwind they should support both React 19 prereleases and ^19.0.0. Are you having any problems?

[silverwind]

Ah, you are right, it's not an issue. I wasn't aware that prerelease ranges are satisified by release versions. This works with npm for me without getting a peerDependencies error:

{
  "dependencies": {
    "@storybook/react": "8.4.7",
    "react": "19.0.0"
  }
}

[kerryj89]

It seems TOOL and TOOLEXTRA do not work with addon on React 19 and cause the following error which probably doesn't mean much to you, but anywhow:

Uncaught TypeError: Cannot read properties of undefined (reading 'A')
    at Y (manager-bundle.js:7:726)
    at J (manager-bundle.js:12:268)
    at P.jsx (manager-bundle.js:16:979)
    at render (manager-bundle.js:16:1915)
    at Xh (globals-runtime.js:3339:13)
    at Wk (globals-runtime.js:5796:23)
    at Vk (globals-runtime.js:5549:13)
    at Uk (globals-runtime.js:5541:27)
    at Jk (globals-runtime.js:5530:9)
    at Ok (globals-runtime.js:5306:81)

If I downgrade to React 18.x it works as expected.

Reproduction:

// .storybook/manager.tsx

import { addons, types } from '@storybook/manager-api';

addons.register('test', () => {
  addons.add('test', {
    type: types.TOOLEXTRA,
    title: 'test',
    paramKey: 'test',
    render: (props: any) => <>test</>,
  });
});

[terrymun]

Can confirm that post-React19 upgrade, everything works with the latest version of Storybook (8.4.7) with the exception of our in-house addons: we have encountered the same error as @kerryj89. Temporarily disabling the addon works for now 👍

[stevensacks]

I'm getting this error when I try to launch Storybook with React 19:

@storybook/core v8.4.7

SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

Original error:
Error: Cannot find module 'esbuild'
Require stack:
- /node_modules/esbuild-register/dist/node.js
- /node_modules/@storybook/core/dist/common/index.cjs
- /node_modules/storybook/dist/proxy.cjs
- /node_modules/storybook/bin/index.cjs
    at Module._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/node_modules/esbuild-register/dist/node.js:4653:16)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at loadMainConfig (./node_modules/@storybook/core/dist/common/index.cjs:17511:11)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37134:11)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)
    at async dev (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

This is my main.ts config:

import type {StorybookConfig} from '@storybook/react-vite';
import {mergeConfig} from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

const config: StorybookConfig = {
  addons: [
    '@storybook/addon-links',
    {
      name: '@storybook/addon-essentials',
      options: {
        backgrounds: false,
        grid: false,
        measure: false,
        outline: false,
      },
    },
    '@storybook/addon-interactions',
  ],

  docs: {},

  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: '.storybook/vite.config.ts',
      },
    },
  },

  stories: ['../app/**/*.stories.tsx'],

  viteFinal: async (viteConfig) =>
    mergeConfig(viteConfig, {
      plugins: [tsconfigPaths()],
    }),
};

export default config;

[yannbf]

Thanks a lot for reporting @kerryj89 @terrymun! I have a PR that will fix that issue: #30003

@stevensacks is React 19 the only variable that makes this fail? I don't see a connection with the error message you provided. Could you please try downgrading to React 18 and see whether it works?

[Tottzi]

Hei Yo,
I still face this issue but only with one addon.
// 'storybook-addon-apollo-client',
This does not work, only gives the
Uncaught TypeError: Cannot read properties of undefined (reading 'A')
at Y (manager-bundle.js:7:726)
at J (manager-bundle.js:12:268)
at P.jsx (manager-bundle.js:16:979)
at render (manager-bundle.js:16:1915)
at Xh (globals-runtime.js:3339:13)
at Wk (globals-runtime.js:5796:23)
at Vk (globals-runtime.js:5549:13)
at Uk (globals-runtime.js:5541:27)
at Jk (globals-runtime.js:5530:9)
at Ok (globals-runtime.js:5306:81)

[mrginglymus]

There are a number of bundled dependencies in storybook that have incompatible types (mostly due to still using the global JSX namespace); I've started a PR to fix the ones I've spotted so far here: #30031

[Sidnioulz]

Thanks for the quick fix @yannbf!

Do you know if this is being backported to 8.4? Or will it be in 8.5+?