From aaeaa1c8ebdaebb4361fb45281c96e40b778b923 Mon Sep 17 00:00:00 2001
From: Jiang Bohan <bhjiang@outlook.com>
Date: Wed, 3 Jun 2026 19:57:28 +0800
Subject: [PATCH] fix(lark): use named import for react-qr-code to survive
 electron-vite interop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking Bind on the agent detail page white-screened the desktop app at
the QR step:

  Element type is invalid: expected a string or a class/function but got:
  object. Check the render method of `LarkInstallDialog`.

react-qr-code is a CJS package. `import QRCode from "react-qr-code"`
relies on the bundler's __esModule default-interop to unwrap `.default`.
Next.js (web) unwraps it correctly; electron-vite's dep-optimizer handed
back the whole module namespace object `{ default, QRCode, __esModule }`
instead of the component, so React got an object where it expected a
component the moment <QRCode> mounted — desktop-only white screen, web
unaffected.

Switch to the named import `{ QRCode }`, which maps straight to
`exports.QRCode` and doesn't depend on the flaky default-interop path.
Resolves correctly under both bundlers; the package's own .d.ts exports
both the named class and the default, so it typechecks unchanged.

Not a backend / Lark-config issue — purely a frontend CJS interop bug.
---
 packages/views/settings/components/lark-tab.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/views/settings/components/lark-tab.tsx b/packages/views/settings/components/lark-tab.tsx
index 1f4b7f2a6..fc70cb6f3 100644
--- a/packages/views/settings/components/lark-tab.tsx
+++ b/packages/views/settings/components/lark-tab.tsx
@@ -4,7 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { ExternalLink, RefreshCw, Trash2 } from "lucide-react";
-import QRCode from "react-qr-code";
+// Named import, NOT default: react-qr-code is CJS, and electron-vite's
+// dep-optimizer default-import interop handed back the module namespace
+// object instead of the component, throwing "Element type is invalid …
+// got: object" the moment <QRCode> mounted (the QR step of the install
+// dialog) — desktop white-screened while web (Next.js, different interop)
+// was fine. The named export maps straight to `exports.QRCode` and
+// resolves correctly under both bundlers.
+import { QRCode } from "react-qr-code";
 import { Button } from "@multica/ui/components/ui/button";
 import { Card, CardContent } from "@multica/ui/components/ui/card";
 import {