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';