-
Notifications
You must be signed in to change notification settings - Fork 107
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
Support React 18 #320
Support React 18 #320
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reviewing from phone but first glance LGTM!
@shilman I need to get to bed, but do you have any idea what this error might be about? https://github.com/storybookjs/builder-vite/runs/5862295224?check_suite_focus=true#step:6:240
It looks like it started in alpha.53, FWIW. |
I think what's happening is as follows:
I'm fuzzy on exactly what changed to trigger the move to Therefore, it is trying to require something from Possible workarounds:
I'm not sure what implications this will have to real-world vue3 user projects that are using vite. In 7.0 we will deal with it properly by simply not having any webpack deps for vue users. But in the meantime it's messy. |
Vite is trying to prebundle @storybook/react even in vue, because it's in our list of optimizeDeps.include. We'll be able to remove it soon in another PR, when we can revisit this as well.
OK thanks @shilman. I determined that the change to allow webpack 5 in storybookjs/storybook#17834 did indeed start allowing the installation of webpack 5 (previously we only had webpack 4 installed). This, in turn, broke my old version of |
Alright, finally got CI green, and I've got some ✅ , so let's gooooo. |
An exciting PR has been merged and released in
6.5.0-alpha.58
that adds storybook support for React 18. However, it currently breaks in the vite-builder test because of animport()
of the newreact-dom/client
, which only exists in react 18. Due to vitejs/vite#6007, we have to do a little bit of trickery to stop vite from erroring out. The approach I'm taking here is:react-dom/client
to a dummy file if it can't berequire.resolve()
ed. This fixes the problem in production builds.react-dom/client
to the list ofoptimizeDeps.exclude
if the framework is react and the package can't be required. This is necessary to prevent vite from trying to pre-bundle, and throwing errors in dev.This PR also updates the examples to the new
6.5.0-alpha.58
version of storybook, which includes the PR mentioned above, so that it can be tested in our react examples, and it adds a newreact-18
example as well.