Issues with Next.js

[wesbos]

Hello - I think this fork does SSR, right?

When I import it like so:

import QrReader from 'react-qr-scanner';

I get this issue: SyntaxError: Cannot use import statement outside a module pointing to > 1 | module.exports = require("react-qr-scanner");

I looked through the source and can't seem to find why it would think it's cjs. Any ideas?

It does work if I use next.js dynamic import, but then that that annoy as it re-imports it when it re-renders.

const QrReader = dynamic(() => import('react-qr-scanner'));

[wesbos]

I think this has to do with the Module not being shipped as CJS, or with a .MJS extension?

[csellis]

Did you make any progress @wesbos ? I'm looking at this same use case

[wesbos]

Yes, I used an alternative lazy import package for React.I forget the name, but it was the big one...

[theabdulmateen]

Yes, I used an alternative lazy import package for React.I forget the name, but it was the big one...

By this do you mean wait till the page is delivered from nextjs and then load the QrReader? In that case you would only need to something of this sort right?

useEffect(() => {
  setHasRendered(true)
}, [])
...
...

<div>
{hasRendered && (
    <QrReader
      ...
    />
  )}
</div>

[ninest]

Apart from the above solution, this works for me

<div>
  {typeof window !== "undefined" && (
    <>
      <QRReader
        onScan={onScan}
        onError={onError}
      ></QRReader>
    </>
  )}
</div>