hooks cannot be used in server component

[PerfectPan]

I try to use hooks in server component, but it reported that 「Cannot read properties of null (reading 'useContext')」

This bug is also similar with #103 (comment) since react-tweet use 「useMemo」 in the server component

codesandbox: https://codesandbox.io/p/sandbox/waku-example-counter-forked-4rg8fz?file=%2Fsrc%2Fcomponents%2FApp.tsx%3A7%2C38

I figured it out the reason, but I do not know how to fix it.

vite.ssrLoadModule will resolve package with override conditions https://github.com/vitejs/vite/blob/main/packages/vite/src/node/ssr/ssrModuleLoader.ts#L132. So when the user code bundled in ssrLoadModule, the react package will be resolved as index.js instead of react.shared-subset.js because of lacking react-server condition.

And the react-dom-server package resolve react as react.shared-subset.js, so there will appear two React instance.

After I forcely changed the vite code by adding react-server condition, it worked.

Obviously it is not a correct way to solve this problem and I have no idea how to fix it, so I leave a message about what I found here.

[dai-shi]

Wow, thanks for your report and digging into it.
I was wondering how it looses react-server condition. Related: #90 and maybe #111

I don't know how to fix it either.
Is anyone familiar with Vite here??

[nksaraf]

Yup!!! This requires a PR in vite: vitejs/vite#13487 I made one but haven't got it landed. Basically whenever does leaves the resolution to node for some cases, it doesn't pass the conditions forward.

[PerfectPan]

I just try the modfied code to reproduce the issue #96 (comment) #111.

And it seems all work fine, so maybe after the above pr merged in the vite or just patching the package in advance can solve those issues.

[dai-shi]

Much appreciated to both of you!!!