-
-
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? |
Hey there, there are no plans to backport this to Storybook 7. Please upgrade to Storybook 8 🙏 |
# Pull Request ## 🤨 Rationale Follow-up from #2501 and #2499 ## 👩💻 Implementation - Updated the major dependencies covered in the above mentioned PR - Did not pull-in React 19 updates yet, seems supported in storybook, will give it a try in a follow-on PR or create a tech debt: storybookjs/storybook#29805 - Rebuilt the lock file to pull in latest versions in semver range - Had to make peerDependencies on React 18 types as the v19 types got pulled in on rebuild of lock file and caused issues in mdx typing (the JSX namespace was deprecated in React 18 and removed in React 19): ``` Error: ../../node_modules/@types/mdx/types.d.ts(23,38): error TS2503: Cannot find namespace 'JSX'. Error: ../../node_modules/@types/mdx/types.d.ts([28](https://github.com/ni/nimble/actions/runs/12565897794/job/35030682905#step:12:29),23): error TS2503: Cannot find namespace 'JSX'. Error: ../../node_modules/@types/mdx/types.d.ts(47,28): error TS2503: Cannot find namespace 'JSX'. Error: ../../node_modules/@types/mdx/types.d.ts(73,46): error TS2503: Cannot find namespace 'JSX'. ``` - Removed the webpack-cli dep which seems unused (we don't see to use the command in any scripts) ## 🧪 Testing Rely on CI ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
Hello @yannbf! Happy New Year! I'm getting the error while working with React 19 and Storybook 8.5.0-beta.5.
I've noticed the error comes from alias importing with Storybook, but I am not sure how to resolve it.
Here webpack.config.js
|
Hi @yannbf, I spent several hours yesterday trying to get storybook (8.4.7) working with React 19 (w/ tailwind) but kept running into the following error when booting storybook. I am using
I have recreated a minimal reproducible example at https://github.com/zeppelinnn/react-19-storybook-nextjs-vite Let me know if you need any other info. Your help is much appreciated |
@zeppelinnn As mentioned by Terry, you can give the Storybook 8.5.0 beta a try to resolve that issue. For me the error is resolved with |
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 Unfortunately in our use case, we have other issues with using 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'm trying to upgrade a project to React 19 with storybook, and I've ran into a typescript issue, I've created a reproduction of the issue here: https://stackblitz.com/edit/github-bmd2twki?file=src%2Fstories%2FPage.stories.tsx&preset=node The error is
And it happens when trying to declare JSX decorators like this: export const withFullHeight = (Story: StoryFn) => {
return (
<div className="h-full">
<Story />
</div>
);
}; Is there a different type instead of PS: Thanks for adding support for React 19 so quickly. |
@akaltar I personally prefer typing the function instead of the parameters, since it requires knowledge of the underlying renderer (AFAIK storybook supports multiple renderers). This should probably work for you: import type { ReactRenderer } from '@storybook/react';
import type { DecoratorFunction } from '@storybook/types';
export const withFullHeight: DecoratorFunction<ReactRenderer> = (Story) => {
return (
<div className="h-full">
<Story />
</div>
);
}; |
Thanks, that resolves the problem! |
@yannbf Can confirm that with the latest 8.5.0 release, the addon issues mentioned by @kerryj89 (#29805 (comment)) has been fixed. Thank you so much! |
Howdy folks, I have run into a few issues with Addon-a11y 8.5.0 and React 19:
I will also note that
Thanks so much for all the work, and have a great day! I can open up an issue on this if required! |
@mpelham could you open a new issue? I'm not sure this is related to React 19 |
It seems to be behaving better for me. this may be a red herring, but it appears that my addon only works if the |
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. |
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: