-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Comments
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 |
it's released now |
Would appreciate if these storybook/code/renderers/react/package.json Lines 96 to 97 in 052f6ce
|
Hey @silverwind they should support both React 19 prereleases and |
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 {
"dependencies": {
"@storybook/react": "8.4.7",
"react": "19.0.0"
}
} |
It seems
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</>,
});
}); |
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 👍 |
I'm getting this error when I try to launch Storybook with React 19:
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; |
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? |
Hei Yo, |
There are a number of bundled dependencies in storybook that have incompatible types (mostly due to still using the global |
Thanks for the quick fix @yannbf! Do you know if this is being backported to 8.4? Or will it be in 8.5+? |
+1 |
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? |
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 |
@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 |
Oh my... LOL. Thanks! 😄 |
Hi there! Will React 19 be supported for Storybook 7? Or is an upgrade to Storybook 8 required? |
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 ( 'use client';
import React from 'react';
function SomeClientComponent() {
React.useEffect(() => {
console.log('React version:', React.version);
}, [])
return null;
} You'll get There are two ways to solve this:
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
In reality you probably want to do both. |
Did anyone managed to fix type issue with StoryFn type with function declaration? I mean this error:
It works with arrow function expression with |
Might be fixed by #30031? |
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 |
For me a Next upgrade to v15.1.5 caused that a11y addon fail. It complains for the same Axe thing |
The |
@Flambe please open a separate issue. Ideally with an reproduction. |
that worked, thank you for the help! |
I have also posted a discussion (#30351) with my fix. The root cause of mine is multi-worker |
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 According to react doc, The above happens with @storybook/nextjs 7.0.22. If I upgrade it to 8.5.1, I get this error instead: Current setup: "storybook": "^7.0.22", |
@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+ |
That’s correct. We only patch back critical security fixes to the previous major version. |
Is it in the plans to also upgrade storybook/code/addons/docs/package.json Lines 104 to 105 in 052f6ce
|
Yes! It seems to be forgotten. Do you want to open a PR? |
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
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 interface ThemeProviderProps { const defaultTheme: Theme = { ...defaultThemeConstants } const ThemeContext = createContext<Theme | undefined>(undefined) export const ThemeProvider: React.FC = (props) => { export const withThemeProvider = (Story: StoryFn) => ( After upgrading react to v19, I am getting an error in withThemeProvider For you reference, this is an example of how I am using it const meta: Meta = { export default meta; type Story = StoryObj; export const Usage: Story = { |
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. |
@maddyahmad |
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
Unfortunately I am not sure how to un-minify the manager-bundle.js to investigate more. |
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! |
Describe the bug
React 19 has been released. We should investigate all the changes that are needed to fully support it.
react-confetti
with@neoconfetti/react
#30098To 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.
The text was updated successfully, but these errors were encountered: