search

soywod / react-pin-field

📟 React component for entering PIN codes.
https://soywod.github.io/react-pin-field/
MIT License
413 stars 24 forks source link

SSR support #40

Closed nazacity closed 2 years ago

nazacity commented 3 years ago

I got ReferenceError: HTMLElement is not defined when try to implement on Nextjs

soywod commented 3 years ago

React pin field has been rewritten in web component since the v2, so I'm not surprised SSR does not work. I will try to investigate.

EDIT: I found this article https://dev.to/swyx/how-to-use-web-components-with-next-js-and-typescript-4gg1. Maybe this could be the solution?

ishabo commented 2 years ago

This issue is making this component impossible to work with in Gatsby. I think the above solution needs to be implemented in react-pin-fields as a fix.

soywod commented 2 years ago

I'm quite busy these days, I will try to take some time to fix this issue. I will let you know!

ishabo commented 2 years ago

Thanks @soywod. My workaround is to load the component lazily using React.lazy and React.Suspense. Without that, both SSR and component unit tests fail.

WilliamIPark commented 2 years ago

If you're using NextJS you can do the following:

import dynamic from "next/dynamic";
const ReactPinField = dynamic(() => import("react-pin-field"), { ssr: false });
soywod commented 2 years ago

After searching on the subject, I came to the conclusion that there is nothing I can do there:

  1. It depends too much on how react-pin-field is imported and used (Webpack, Next, Gatsby…)
  2. There is no benefits for react-pin-field to be rendered server side, it is a client feature. So the solution to import dynamically the component makes sense (and it is how web components seem to be treated right now)

I will add a side note in the README about SSR and link to this issue. Feel free to add more workarounds about how to import dynamically the component!

soywod commented 2 years ago

The native web component was a big mistake, it led to so many issues… I ended up rolling back to v1 state, without web component (pure React implementation). The SSR should work back as expected starting from the v3.0.11.