Default import?

[benlieb]

I have to do this for some reason:

import { QRCode } from 'react-qr-code'; // note different from docs

[am-david-jiang]

Yes, I have the same problem. If I write import QRCode from 'react-qr-code, the website will not show up. Instead I get this error

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of QRCodeGenerator.
at createFiberFromTypeAndProps (react-dom.development.js:28439:17)
at createFiberFromElement (react-dom.development.js:28465:15)
at reconcileSingleElement (react-dom.development.js:15750:23)
at reconcileChildFibers2 (react-dom.development.js:15808:35)
at reconcileChildren (react-dom.development.js:19167:28)
at updateHostComponent (react-dom.development.js:19924:3)
at beginWork (react-dom.development.js:21618:14)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)

It seems like the export is a object, like the normal export in ES Module, not the default function component QRCode
(btw I use esbuild to bundle my code, the CLI command I use is esbuild --bundle ./src/main.jsx --outfile=build/main.js --sourcemap --loader:.js=jsx --watch --servedir=build for live reloading)

The problem is solved by wrapping QRCode with curly brackets. like import { QRCode } from 'react-qr-code';

[kblestarge]

I have to do the same. The named export is the only one that works for me too. TypeScript doesn't like it (unfortunately must use @ts-ignore) but it does work:

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import { QRCode } from 'react-qr-code';

[redneb]

I ran into this issue too.

Here's a very minimal example to reproduce this:
(Note: To make this example as minimal as possible, I am not using typescript and jsx syntax)

Create the following 2 files in a new directory:

test.js:

import {jsx as _jsx} from "react/jsx-runtime";
import * as ReactDOMServer from "react-dom/server";
import QRCode from "react-qr-code";

const qrcode = _jsx(QRCode, {value: "This is a test"});
console.log(ReactDOMServer.renderToStaticMarkup(qrcode));

package.json:

{
  "type": "module",
  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-qr-code": "^2.0.15"
  }
}

The test script attempts to render <QRCode value="this is a test" /> in server-side rendering mode, which should produce a string containing the corresponding HTML code.

If you try to run this with node test.js you will get an error. If you remove the line "type": "module" from package.json, then it runs fine. If you want to use "type": "module", then you have to use QRCode.default instead of QRCode.

[redneb]

My workaround in typescript that allows me to use this package is:

import QRCode_import from "react-qr-code";
const QRCode = (QRCode_import as unknown as {default: typeof QRCode_import}).default;

This avoids the use of @ts-ignore and QRCode is actually typed.

[CanRau]

Facing the same.

Might be because type is not set to module https://nodejs.org/api/packages.html#type
and/or because exports is missing https://nodejs.org/api/packages.html#package-entry-points