diff --git a/packages/views/settings/components/lark-tab.test.tsx b/packages/views/settings/components/lark-tab.test.tsx
index 4b225c96e4..14d93354aa 100644
--- a/packages/views/settings/components/lark-tab.test.tsx
+++ b/packages/views/settings/components/lark-tab.test.tsx
@@ -133,11 +133,17 @@ vi.mock("sonner", () => ({
 // react-qr-code renders SVG that jsdom doesn't fully support — a stub
 // keeps the dialog DOM compact and lets us assert on the surrounding
 // chrome (status text, buttons) without QR mechanics.
-vi.mock("react-qr-code", () => ({
-  default: ({ value }: { value: string }) => (
+// Expose the stub as BOTH the named `QRCode` export (what lark-tab now
+// imports — see the named-import interop fix) and `default`, so the mock
+// stays correct regardless of how the component pulls it in. The stub is
+// defined inside the factory because vi.mock is hoisted above any
+// top-level variable.
+vi.mock("react-qr-code", () => {
+  const QrStub = ({ value }: { value: string }) => (
     <span data-testid="qr-code" data-value={value} />
-  ),
-}));
+  );
+  return { QRCode: QrStub, default: QrStub };
+});
 
 import { LarkAgentBindButton, LarkTab } from "./lark-tab";
 
diff --git a/packages/views/settings/components/lark-tab.tsx b/packages/views/settings/components/lark-tab.tsx
index 1f4b7f2a60..fc70cb6f34 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 {