Astro: The requested module is a CommonJS module, ...may not support ... named exports with pnpm

[lstephensca]

Not sure if this is qrcode.react specific or a configuration tweak that I need to make on my end, but If I load QRCodeSVG into an astro component (running in SSR using the node adapter and react), I get the following error with endless loading:

 <QRCodeSVG value={originalUrl} includeMargin={true} client:load />

Named export 'QRCodeSVG' not found. The requested module 'qrcode.react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'qrcode.react';
const {QRCodeSVG} = pkg;

The only "fix" I have been able to come up with is by changing client:load to client:only="react" which is okay for the time being, but does introduce quite a flicker on page load.

Astro                    v4.12.2
Node                     v21.7.1
Package Manager          pnpm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/tailwind
                         @astrojs/react

I did double check and I am using the latest release of qrcode.react.

[zpao]

Interesting… we do ship with support for both modern and commonjs modules and I thought that was set up correctly. I haven't seen any issues but perhaps people are falling back to the commonjs modules without realizing and just not hitting issues.

I've played around with Astro before so this should be easy enough to repro, but if you happen to have a chance to create the most minimal standalone example it would help :)

[lstephensca]

Sure thing! I set up a small astro example with node and react.

The first example works fine, save for some flickering (more noticeable while not in stackblitz) , if used with client:only="react". The second example uses client:load and generates the error regarding commonJS.

[zpao]

Ok, looks like #301 fixes this. I'm not sure if I'm going to backport and do a 3.2.0 release, but I tagged that PR to make sure it gets included if I do.

I also found https://github.com/withastro/astro/issues/3174 which helped me figure out the issue and may offer an interim solution for you.

Example was super helpful to diagnose and test this quickly, so thank you!

[zpao]

Hey, I did backport the fix for 3.2 (and shipped 4.0). Let me know if these don't work out!