Storybook Vite React context issue

[silent quiver]

Stumbled upon a really weird issue and was curious if this issue has something to do with it: https://github.com/vitejs/vite/issues/3301 @strong ember any clue?

I will try to replicate this in an example repo if needed, but the issue is:

1. React context cannot be accessed if I render the component as a function, which is needed in our case to allow component overriding
2. If I create a proxy component, you will notice in the video that on Save, it switches between a properly working state and then breaking, and back again to working

Any clue if this can be patched from my side?

[silent quiver]

For reproduction a repo: https://github.com/konsalex/storybook-vite-react-context
Or a Gitpod: https://gitpod.io#snapshot/404447c2-5f6a-4e3d-a359-640d987d3317

And to reproduce:

yarn
yarn workspace @newline-ds/foundation build
yarn workspace @newline-ds/react build
yarn workspace @newline-ds/storybook storybook

And then go to Tailwind Button component

You can alternate between those two lines to see the bug:

{/* {state.components && state.components.Header()} */}
<ProxyTest />

[strong ember]

oh interesting, are you not using the vite react plugin? I don't see it in your viteFinal.

I think we add it for you if you don't have it, so shouldn't be a big deal. I'll have to check we're adding the latest version that has the fix for that HMR issue, but I'll need to look into it later, behind a bit on actual job. 😅

[silent quiver]

Sure, if this is known that's cool, found at least workaround to avoid both issues

[strong ember]

What workaround did you use?

I don't think this is a known issue, at least not by me

[silent quiver]

1. For the weird saving file I extracted the context to another file. I think it is working like this Initial save, everything works -> Next save, component is re-initialised in another context and thus breaking -> next save re-initialise the whole file as it is in a broken state?!
2. For this syntax {state.components && state.components.Header()} I know use something like {Components?.Header && <Components.Header />} which is not breaking

But it is inconsistent as the syntax that was breaking in this repro link works fine: https://stackblitz.com/edit/node-iphz1j?file=src/Button.tsx
Not sure if the issue is that here the component is in the same "package" as Storybook or not.

[strong ember]

Can you run npm ls @vitejs/plugin-react?

[silent quiver]

In my repo?

"@vitejs/plugin-react@npm:^2.0.0":
  version: 2.2.0

[strong ember]

ok, well, that has the fix for the hmr issue.