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

Documentation of precautions when using Vite #18399

Closed
ghost opened this issue Jun 3, 2022 · 5 comments
Closed

Documentation of precautions when using Vite #18399

ghost opened this issue Jun 3, 2022 · 5 comments

Comments

@ghost
Copy link

ghost commented Jun 3, 2022

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/xxxxx package.
  • 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.

#17516

<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.

@IanVS
Copy link
Member

IanVS commented Jun 3, 2022

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.

@ghost
Copy link
Author

ghost commented Jun 3, 2022

@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.

@IanVS
Copy link
Member

IanVS commented Jun 3, 2022

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.

@ghost
Copy link
Author

ghost commented Jun 3, 2022

@IanVS
I confirmed, I think there is no problem.
I was impressed by the prompt response, thank you !!!

@ghost
Copy link
Author

ghost commented Jun 3, 2022

@IanVS
It's just a feeling, but I'll leave the money for the coffee through the github sponsor, thank you.

@ghost ghost closed this as completed Jun 3, 2022
dhess added a commit to hackworthltd/primer-app that referenced this issue Oct 18, 2022
See storybookjs/storybook#18399

We don't need this at the moment, but I discovered this while looking
into another Storybook issue, and it seems worth adding now in case we
use Jest in the future, as it is not well documented. (Also, it sounds
like Storybook projects created with recent versions will
automatically add this file.)
mxdvl added a commit to guardian/discussion-rendering that referenced this issue Oct 24, 2022
mxdvl added a commit to guardian/discussion-rendering that referenced this issue Oct 24, 2022
mxdvl added a commit to guardian/discussion-rendering that referenced this issue Oct 24, 2022
mxdvl added a commit to guardian/discussion-rendering that referenced this issue Oct 25, 2022
mxdvl added a commit to guardian/discussion-rendering that referenced this issue Oct 25, 2022
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant