Library does not work together with Vite 8

[c-bod]

Hi!

We recently upgraded to Vite 8 in our project and it resulted in the following error for us ("QRCode" is the name of the component we render ReactQRCode inside of):

What ended up fixing it for us was adding legacy: { inconsistentCjsInterop: true, } to our vite config, but that does not seem like a good long-term solution. 🙂

Would it be possible to update the library, so that it works together with vite 8 without having to rely on legacy features?

I hope the following will help you understand what the issue is (I do not understand the details 😅):

https://vite.dev/blog/announcing-vite8
https://main.vite.dev/guide/migration#consistent-commonjs-interop
https://rolldown.rs/in-depth/bundling-cjs#ambiguous-default-import-from-cjs-modules

[michal-hachula]

For us changing import did that trick, however this needs @ts-ignore comment.

import QRCode from 'react-qr-code'

to:

import { QRCode } from 'react-qr-code

It seems like Vite 8 resolves default imports differently:

node -e "const m = require('react-qr-cod
e'); console.log('default:', typeof m.default); console.log('named:', typeof m.QRCode); console.log('keys:', Object.keys(m));"

default: object
named: object
keys: [ 'QRCode', 'default' ]              

After using additional .default:

node -e "const m = require('react-qr-code');
 console.log('default.default:', typeof m.default.default); console.log('named:', typeof m.default.default); console.log('keys:', Object.keys(
m.default));"

default.default: undefined
named: undefined
keys: [ '$$typeof', 'render', 'propTypes' ]

[elderapo]

Workaround: use named import + add module augmentation for types:

import { QRCode } from "react-qr-code";

// vite-env.d.ts (or any .d.ts file)
declare module "react-qr-code" {
  export { default as QRCode } from "react-qr-code";
}