search

dashboardphilippines / react-webcam-barcode-scanner

[UNMAINTAINED -- PLEASE USE https://github.com/jamenamcinteer/react-qr-barcode-scanner INSTEAD] A simple React Component using the client's webcam to read barcodes.
45 stars 32 forks source link

Cannot be used in NextJs #9

Closed hiep294 closed 3 years ago

hiep294 commented 3 years ago

The component requires window but the window is not defined in server side of NextJS, so cannot be used in NextJS.

erikdstock commented 3 years ago

The component requires window but the window is not defined in server side of NextJS, so cannot be used in NextJS. @hiep294 this problem is not unique to nextjs and you can work around it by rendering conditionally on client or server.

The usual approach in situations like this is to test for presence of window - i often export a helper from util/env.js: export const isBrowser = typeof window !== 'undefined', then in my code something like <BlahBlah>{isBrowser ? <BrowserOnlyComponent/> : <ServerSidePlaceholder />.

If you face an issue with server-generated html not matching what the client wants to render you can add an additional wrapper to your client component so that it loads on the user's side from the placeholder.

hiep294 commented 3 years ago

The component requires window but the window is not defined in server side of NextJS, so cannot be used in NextJS. @hiep294 this problem is not unique to nextjs and you can work around it by rendering conditionally on client or server.

The usual approach in situations like this is to test for presence of window - i often export a helper from util/env.js: export const isBrowser = typeof window !== 'undefined', then in my code something like <BlahBlah>{isBrowser ? <BrowserOnlyComponent/> : <ServerSidePlaceholder />.

If you face an issue with server-generated html not matching what the client wants to render you can add an additional wrapper to your client component so that it loads on the user's side from the placeholder.

the problem is that app immediately throws errors when import the BarcodeScannerComponent from the lib https://codesandbox.io/s/nextjs-barcode-scanner-p9rdo?file=/pages/index.js:34-57

hiep294 commented 3 years ago

The lib can not be used in Safari too. Although the demo website worked, but create-react-app does not

hiep294 commented 3 years ago

The lib can not be used in Safari too. Although the demo website worked, but create-react-app does not

Oh, I have found the problem is caused by react-webcam, seem that it cannot work in safari or mobile device

hiep294 commented 3 years ago

Or maybe, can not view webcam in dev in safari of mobile device