Documentation of precautions when using Vite
reowl666 opened this issue · comments
I'm new to Storybook, but when using it with Vite, I had the following two problems, and I wasted a day with the latter problem.
- To run Storybook, need to install the
@mdx-js/xxxxxpackage. - global is not defined error
The global is not defined error can can be avoided by adding the preview-head.html file and adding the following code.
Seems to be due to the jest-mock package used inside the @storybook/addon-interactions add-on.
<script>
window.global = window;
</script>I couldn't find a description of these issues in the official documentation, but I can't use the Storybook without addressing these issues.
I was confused because @storybook/addon-interactions was omitted without explanation in the Vite section of the official docs, even though it was the default add-on.
https://storybook.js.org/docs/react/builders/vite
I will pull request if I have time, but please let me know if my understanding is wrong.
Thanks for bringing this up, @yogarasu. I'm writing up a converting to vite builder section for the readme right now, and will include the mdx issue in the known issues section as well, until we can get that straightened out.
Edit: PR is up at storybookjs/builder-vite#405, if you'd be so kind as to review to see if I missed anything.
@IanVS
Thank you very much!!!
People like me want to use Vite in terms of performance, so I want to lower the barrier as much as possible.
I don't think there is any particular reason to install the packages individually, so in the future it would be nice if the mdx package that suits your environment is automatically installed.
I will check the review.
For sure, it's definitely a bug (storybookjs/builder-vite#391). It's due to react 18 and mdx2 and the mdx plugin we're using, etc. We're working on it in storybookjs/builder-vite#377, which I hope will solve that issue.