Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Investigation]: Support React 19 #29805

Closed
13 of 14 tasks
yannbf opened this issue Dec 4, 2024 · 53 comments
Closed
13 of 14 tasks

[Investigation]: Support React 19 #29805

yannbf opened this issue Dec 4, 2024 · 53 comments

Comments

@yannbf
Copy link
Member

yannbf commented Dec 4, 2024

Describe the bug

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

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
Copy link
Contributor

JReinhold commented Dec 4, 2024

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
Copy link

ianzone commented Dec 6, 2024

it's released now

@silverwind
Copy link

silverwind commented Dec 6, 2024

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

"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
Copy link
Member Author

yannbf commented Dec 6, 2024

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

@silverwind
Copy link

silverwind commented Dec 6, 2024

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
Copy link

kerryj89 commented Dec 8, 2024

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
Copy link

terrymun commented Dec 9, 2024

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
Copy link
Contributor

stevensacks commented Dec 10, 2024

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
Copy link
Member Author

yannbf commented Dec 10, 2024

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
Copy link

Tottzi commented Dec 11, 2024

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
Copy link
Contributor

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
Copy link
Member

Thanks for the quick fix @yannbf!

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

@gvillo
Copy link

gvillo commented Dec 13, 2024

+1

@yannbf
Copy link
Member Author

yannbf commented Dec 19, 2024

Thanks for the quick fix @yannbf!

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

Most of the work we are doing is towards 8.5, which is currently in beta so should be released soon!

@savanesoff
Copy link

Thanks for the quick fix @yannbf!
Do you know if this is being backported to 8.4? Or will it be in 8.5+?

Most of the work we are doing is towards 8.5, which is currently in beta so should be released soon!

When can we expect this to be avaialble?
This is a magor issue as a lot depends on automation.
Is there a way to run a beta instad?

@terrymun
Copy link

Thanks for the quick fix @yannbf!
Do you know if this is being backported to 8.4? Or will it be in 8.5+?

Most of the work we are doing is towards 8.5, which is currently in beta so should be released soon!

When can we expect this to be avaialble? This is a magor issue as a lot depends on automation. Is there a way to run a beta instad?

If you're in a pinch you can always give the latest beta release for 8.5.0 a try: https://github.com/storybookjs/storybook/releases/tag/v8.5.0-beta.5

@savanesoff
Copy link

savanesoff commented Dec 23, 2024

Thanks for the quick fix @yannbf!
Do you know if this is being backported to 8.4? Or will it be in 8.5+?

Most of the work we are doing is towards 8.5, which is currently in beta so should be released soon!

When can we expect this to be avaialble? This is a magor issue as a lot depends on automation. Is there a way to run a beta instad?

If you're in a pinch you can always give the latest beta release for 8.5.0 a try: https://github.com/storybookjs/storybook/releases/tag/v8.5.0-beta.5

Thanks for speedy reply @terrymun
I've never had the opportunity to install/use unreleased npm registry packages. Any pointers on how I go about using beta?
Thanks again!

@terrymun
Copy link

terrymun commented Dec 23, 2024

@savanesoff 8.5.0-beta.5 has been released: check the releases page or npmjs. You install it just like how you'd install a specific version of any dependency, e.g. if you're npm then it's just npm install [email protected]

@savanesoff
Copy link

@savanesoff You install it just like how you'd install a specific version of any dependency, e.g. if you're npm then it's just npm install [email protected]

Oh my... LOL. Thanks! 😄
I was searching for it in NPM registry and coulnd't find it, untill I really looked for it 😇 My bad...
You're a saviour!

@rrogowski
Copy link

Hi there! Will React 19 be supported for Storybook 7? Or is an upgrade to Storybook 8 required?

@zeppelinnn
Copy link

Hey @Boonstra, thanks for the reply! I added a new commit to bump dependencies to the beta version you mentioned (in the example repo I shared) but i'm still seeing the same error. I believe this is specific to the @storybook/experimental-nextjs-vite framework - if i try to use @storybook/nextjs framework it works fine.
Could you please check again? Thank you!

Right, I also can't get the Storybook in your repository to run without that error coming up.

I've tried to upgrade to [email protected] but still experiencing the same issue (original report)

We're blocked on upgrading to react 19 due to this error - any update on progress or an ETA would be greatly appreciated!

@JReinhold
Copy link
Contributor

JReinhold commented Jan 20, 2025

I've tried to upgrade to [email protected] but still experiencing the same issue (original report)

We're blocked on upgrading to react 19 due to this error - any update on progress or an ETA would be greatly appreciated!

@zeppelinnn the reason you're experiencing this issue, is because you're still using Next.js v14 which doesn't support React 19.

Storybook's Next.js integration (@storybook/nextjs and @storybook/experimental-nextjs-vite) uses the React version that Next.js comes precompiled with, and that version must match what you define in Storybook. In your apps/docs and and apps/web you have "next": "^14.2.3", which only supports React 18. While you also have "react": "19.0.0" there, that doesn't actually make a difference because Next.js ships its own version of React, so you're lying to yourself. You can see this if you do something like this in your Next.js application today:

'use client';
import React from 'react';

function SomeClientComponent() {
  React.useEffect(() => {
    console.log('React version:', React.version);
  }, [])
  return null;
}

You'll get React version: 18.3.0-canary-178c267a4e-20241218 in your console.

There are two ways to solve this:

  1. Install next@^15 as a devDependency in your ui package, and Storybook will use that correctly then. Then the UI package will not depend on your next package being hoisted from apps and docs. Though your UI will now support Next.js 15 and React 19, your app still won't, so you could run into trouble there.

You can see I did this here which made things work again: JReinhold/react-19-storybook-nextjs-vite@19a2a92

As a side note, you should also install react and react-dom as devDependencies to your ui package. Even though they are currently listed as peerDependencies, your UI package is not self-contained, which is a common footgun. It only really works right now because Yarn hoists React from your other packages, but that can easily change in the future. If dependencies changes in your other packages, the UI package will break, which is not something you want. It's best practice to list explicit versions of any peer dependencies you have as dev dependencies.

  1. Upgrade to Next.js v15 in your apps and docs, so they actually come shipped with React 19.

In reality you probably want to do both.

@Demianeen
Copy link

Did anyone managed to fix type issue with StoryFn type with function declaration? I mean this error:

     ├╴  'StoryComponent' cannot be used as a JSX component.
     │      Its type 'AnnotatedStoryFn<ReactRenderer, ReactRenderer>' is not a valid JSX element type.
     │        Type 'AnnotatedStoryFn<ReactRenderer, ReactRenderer>' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.
     │          Target signature provides too few arguments. Expected 2 or more, but got 1. ts (2786) [7, 5]

It works with arrow function expression with DecoratorFunction<ReactRenderer> but I don't think we can assign type like this to function declaration.

@mrginglymus
Copy link
Contributor

Might be fixed by #30031?

@akibarika
Copy link

Howdy folks, I have run into a few issues with Addon-a11y 8.5.0 and React 19:

 FAIL  src/stories/Components/Foo/Foo.stories.tsx
  ● Foo/Foo › Default › smoke-test

    page.evaluate: Error: Axe is already running. Use `await axe.run()` to wait for the previous run to finish before starting a new run.

I will also note that addon-ally will fail when running npx storybook@next upgrade.

npm ERR! Found: @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-a11y
npm ERR!   dev @storybook/addon-a11y@"^8.6.0-alpha.0" from the root project

Thanks so much for all the work, and have a great day! I can open up an issue on this if required!

I had a same issue, and I don't think it relates with React 19. I think it's the issue with upgrading to 8.5.0

@Tottzi
Copy link

Tottzi commented Jan 23, 2025

For me a Next upgrade to v15.1.5 caused that a11y addon fail. It complains for the same Axe thing
Error: Axe is already running. Use await axe.run() to wait for the previous run to finish before starting a new run.

@Flambe
Copy link
Contributor

Flambe commented Jan 23, 2025

The Axe is already running issue isn't related to React (unless it's related to the storybook UI itself). My app is built in Vue and I've got the same issue after updating to 8.5.*

@valentinpalkovic
Copy link
Contributor

@Flambe please open a separate issue. Ideally with an reproduction.

@zeppelinnn
Copy link

I've tried to upgrade to [email protected] but still experiencing the same issue (original report)
We're blocked on upgrading to react 19 due to this error - any update on progress or an ETA would be greatly appreciated!

@zeppelinnn the reason you're experiencing this issue, is because you're still using Next.js v14 which doesn't support React 19.

Storybook's Next.js integration (@storybook/nextjs and @storybook/experimental-nextjs-vite) uses the React version that Next.js comes precompiled with, and that version must match what you define in Storybook. In your apps/docs and and apps/web you have "next": "^14.2.3", which only supports React 18. While you also have "react": "19.0.0" there, that doesn't actually make a difference because Next.js ships its own version of React, so you're lying to yourself. You can see this if you do something like this in your Next.js application today:

'use client';
import React from 'react';

function SomeClientComponent() {
React.useEffect(() => {
console.log('React version:', React.version);
}, [])
return null;
}
You'll get React version: 18.3.0-canary-178c267a4e-20241218 in your console.

There are two ways to solve this:

  1. Install next@^15 as a devDependency in your ui package, and Storybook will use that correctly then. Then the UI package will not depend on your next package being hoisted from apps and docs. Though your UI will now support Next.js 15 and React 19, your app still won't, so you could run into trouble there.

You can see I did this here which made things work again: JReinhold/react-19-storybook-nextjs-vite@19a2a92

As a side note, you should also install react and react-dom as devDependencies to your ui package. Even though they are currently listed as peerDependencies, your UI package is not self-contained, which is a common footgun. It only really works right now because Yarn hoists React from your other packages, but that can easily change in the future. If dependencies changes in your other packages, the UI package will break, which is not something you want. It's best practice to list explicit versions of any peer dependencies you have as dev dependencies.

  1. Upgrade to Next.js v15 in your apps and docs, so they actually come shipped with React 19.

In reality you probably want to do both.

that worked, thank you for the help!

@akibarika
Copy link

I have also posted a discussion (#30351) with my fix. The root cause of mine is multi-worker

@Eyad-A
Copy link

Eyad-A commented Jan 24, 2025

Is Storybook 7 suppose to work with React 19? I recently upgraded Next.js 14 => 15 and React 18 => 19, and that broke Storybook for us. When I launch storybook, I get react_dom__WEBPACK_IMPORTED_MODULE_0__.unmountComponentAtNode is not a function.

According to react doc, unmountComponentAtNode has been deprecated.

The above happens with @storybook/nextjs 7.0.22. If I upgrade it to 8.5.1, I get this error instead:
SB_CORE-SERVER_0002 (CriticalPresetLoadError): Storybook failed to load the following preset: @storybook/nextjs/preset.

Current setup:

"storybook": "^7.0.22",
"typescript": "^5.1.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"next": "^15.1.6",
"@storybook/nextjs": "^7.0.22",
"@storybook/react": "^8.4.7",

@terrymun
Copy link

@Eyad-A Storybook 7 has been released quite awhile ago and I do not expect it to be updated to support React 19. You need to upgrade to Storybook 8.5+

@valentinpalkovic
Copy link
Contributor

That’s correct. We only patch back critical security fixes to the previous major version.

@mathiaslaramee
Copy link

Is it in the plans to also upgrade

"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
?

@shilman shilman added this to the 9.0 milestone Jan 29, 2025
@valentinpalkovic
Copy link
Contributor

Yes! It seems to be forgotten. Do you want to open a PR?

verochan added a commit to agroptima/design-system that referenced this issue Jan 31, 2025
Storybook has decided to replace react-confetti by neoconfetti, this change is pending. But, the react-confetti authors have updated the react 19 dependency problem. Temporary, we can have react-confetti updated through package-lock until Storybook publishes the new change.

alampros/react-confetti#159 (comment)

storybookjs/storybook#29805
@maddyahmad
Copy link

maddyahmad commented Jan 31, 2025

Hi, I have updated react to v19, and after that I am getting an error. I have also updated to v8.5.2, but nothing works.

My component is
import { SnackbarProvider } from "@/store/SnackbarContext";
import { StoryFn } from "@storybook/react";
import { render } from "@testing-library/react";
import { merge } from "lodash";
import React, { createContext, useContext } from "react";
import { Theme, defaultThemeConstants } from '../utils/theme';

interface ThemeProviderProps {
theme?: Theme
children?: React.ReactNode
}

const defaultTheme: Theme = { ...defaultThemeConstants }

const ThemeContext = createContext<Theme | undefined>(undefined)

export const ThemeProvider: React.FC = (props) => {
return (
<ThemeContext.Provider value={merge(defaultTheme, props.theme)}>
{props.children}
</ThemeContext.Provider>
)
}

export const withThemeProvider = (Story: StoryFn) => (





);

After upgrading react to v19, I am getting an error in withThemeProvider
'Story' cannot be used as a JSX component.
Its type 'AnnotatedStoryFn<ReactRenderer, Args>' is not a valid JSX element type.
Type 'AnnotatedStoryFn<ReactRenderer, Args>' is not assignable to type '(props: any) => ReactNode'.
Target signature provides too few arguments. Expected 2 or more, but got 1.ts(2786)
(parameter) Story: AnnotatedStoryFn<ReactRenderer, Args>.

For you reference, this is an example of how I am using it
import { withThemeProvider } from '@/theme/ThemeProvider';
import { Meta, StoryObj } from '@storybook/react';

const meta: Meta = {
title: 'title',
component: Component,
parameters: {
layout: 'centered',
actions: { argTypesRegex: '^on.*' },
docs: {
description: {
component: My doc //
}
}
},
tags: ["autodocs"],
};

export default meta;

type Story = StoryObj;

export const Usage: Story = {
args: {
},
render: (args) => (
My Component //
),
decorators: [withThemeProvider],
};

@mathiaslaramee
Copy link

mathiaslaramee commented Feb 4, 2025

Yes! It seems to be forgotten. Do you want to open a PR?

I'm trying but struggling a bit since this is a dependencies update and not just a peerDependencies update. Giving me some troubles when trying to install the dependencies after I specify the new react version.

@JReinhold also mentioned in his first reply that changing this specifically in @storybook/addon-docs is a breaking change.
Any thoughts? @valentinpalkovic

@mrginglymus
Copy link
Contributor

@maddyahmad 8.6.0-alpha.3 might fix those problems; that contains a lot of type fixes.

@mellm0
Copy link

mellm0 commented Feb 13, 2025

Hi!

It seems we are still getting this issue with the latest Storybook. From debugging, it seems to be when we import a component from an external library inside the addon.

import { LiveProvider } from 'react-live';
 <LiveProvider code={state.code} theme={theme}></LiveProvider>

The error I am seeing is similar to the ones posted previously

globals-runtime.js:2661 Uncaught TypeError: Cannot read properties of undefined (reading 'A')
    at p (manager-bundle.js:7:744)
    at k (manager-bundle.js:12:280)
    at Co.jsx (manager-bundle.js:16:980)
    at y2 (manager-bundle.js:160:1924)
    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)

Unfortunately I am not sure how to un-minify the manager-bundle.js to investigate more.

@shilman
Copy link
Member

shilman commented Feb 13, 2025

Closing and locking this issue since it has become a bit of a dumping ground.

If you have a specific React 19 issue, please file it separately with a reproduction and we'll be happy to take a look!

@shilman shilman closed this as completed Feb 13, 2025
@storybookjs storybookjs locked as off-topic and limited conversation to collaborators Feb 13, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Status: Done
Development

No branches or pull requests