'React + vitejs + storybook setup

I am trying to setup react that is bundled with vitejs and storybook after running the setup command as per vitejs docs storybook vite builder storybook runs but keeps showing it's loader and and nothing happens, if someone can point me on how to setup storybook with react and vite I'd be so thankful.



Solution 1:[1]

The issue is that jest (used by addon-interactions) assumes it is running in node, so it relies on a global on the global scope, which doesn't exist in the browser. One way to deal with this in storybook is to add a .storybook/preview-head.html file with the contents of:

<script>
  window.global = window;
</script>

This will alias window to the global that jest is expecting, which works fine for the kinds of things needed by the interactions addon. Jest 28 will fix this problem, which will likely be used in the next major version of storybook (7.0).

Solution 2:[2]

I removed the interactions addon and it works fine, I don't use this addon so it's not a problem for me though, if someone can fix it and share how it'd be great

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 IanVS
Solution 2 Abdelrahman Abdelatief