Guarding against server side rendering

[powderham]

I am unable to render my project server side because this module uses Blob.

I have found a work around, that doesn't work with webpack by doing the below.

if (typeof Blob !== 'undefined') {
  QrReader = require('react-qr-reader').reader();
} 

Has anyone else found a way to include this module in their project, or can we have a prop to give the component if the environment is the server so as to avoid trying to use Blob?

[JodusNodus]

Seems like a lot of people are trying this out. I'll look at a better way of solving this.

[powderham]

I'm trying to build an application that will rely on this heavily if we resolve it, so I'm keen to help out. I haven't taken the time to properly dig in to this component, but if you explain what we're using the BLOb for, I can look at other methods too.

[JodusNodus]

With the current implementation i use the Blob to inline the web worker. Which is the only way to do that. But in version 2.0.0 that i'm creating on the ios11-fix branch I'm probably going to stop inlining it so that you have to load the web worker yourself.

But in the meanwhile i have fixed it in the ios11-fix branch by checking if Blob API exists and only then using it. So just use the ios11-branch directly until i release 2.0.0. Let me know if it works.

[powderham]

@JodusNodus I have moved away from server-side rendering on my project for now. I will get back to you when I re-add it, if you've not released 2.0 before that.

[JodusNodus]

@powderham Version 2.0.0 has been released, with improved server side support. But i will be adding more reinforcements in later releases.

[rajatbhatnagar94]

I have also used a workaround for ssr using react lazy and suspense.

const QRReader = React.lazy(() => import("react-qr-reader"));
...
...
...

<Suspense fallback={<div>Loading...</div>}>
   <QRReader {...props}/>
</Suspense>

[JodusNodus]

@rajatbhatnagar94 Thats indeed the proper way to handle this.

[dwrellin]

@rajatbhatnagar94 I have tried your SSR workaround but it says: Unhandled Rejection (Invariant Violation): ReactDOMServer does not yet support Suspense.

Is there a way to fix this? I'm using Next.js btw

[rajatbhatnagar94]

@dwrellin Even I am using ReactDOMServer's renderToString for ssr and it is working fine for me. My version of react and react-dom are 16.8.1 and I'm not using next.js.. Can't tell you much without looking into your code and the version you are using.

[tac0turtle]

With next.js you can use import dynamic from "next/dynamic";

const QrReader = dynamic(() => import("react-qr-reader"), { ssr: false});

instead of using loadable-components, and till react.lazy is supported on ssr

[rturk]

Any ideia how to make it work with Gatsby? I've tried @rajatbhatnagar94 solution with no luck

[jatidevelopments]

Any ideia how to make it work with Gatsby? I've tried @rajatbhatnagar94 solution with no luck

Did you find a solution for gatsby?

[omrta-dev]

For a named export it would be similar to this:

const QrReader = dynamic(
  () => import('react-qr-reader').then((mod) => mod.QrReader),
  { ssr: true }
);