Open
Description
Describe the bug
I have a next.js project, and I wanted to use Preview.js. Sadly, it doesn't really work for me at all. I am getting the same error every time.
Reproduction
Example component
import { Home, Search, Bell, User } from "lucide-react";
import Link from "next/link";
import type { ReactNode } from "react";
interface NavItemProps {
href: string;
icon: ReactNode;
label: string;
isActive: boolean;
}
function NavItem({ href, icon, label, isActive }: NavItemProps) {
return (
<Link
href={href}
className={`flex items-center justify-center md:justify-start w-full md:w-auto p-2 md:p-4 rounded-lg transition-colors ${
isActive
? "text-primary bg-primary/10"
: "text-muted-foreground hover:text-primary hover:bg-primary/5"
}`}
>
{icon}
<span className="text-xs md:text-sm md:ml-3">{label}</span>
</Link>
);
}
export default function BottomNavigation({ activePath = "/" }) {
return (
<nav className="fixed md:sticky bottom-0 left-0 right-0 md:top-0 bg-background border-t md:border-t-0 md:border-r border-border">
<div className="flex md:flex-col justify-around md:justify-start items-stretch md:h-screen max-w-md md:max-w-[200px] mx-auto md:mx-0">
<NavItem
href="/"
icon={<Home className="h-6 w-6" />}
label="Home"
isActive={activePath === "/"}
/>
<NavItem
href="/search"
icon={<Search className="h-6 w-6" />}
label="Search"
isActive={activePath === "/search"}
/>
<NavItem
href="/notifications"
icon={<Bell className="h-6 w-6" />}
label="Notifications"
isActive={activePath === "/notifications"}
/>
<NavItem
href="/profile"
icon={<User className="h-6 w-6" />}
label="Profile"
isActive={activePath === "/profile"}
/>
</div>
</nav>
);
}- Click "Open XYZ in Preview.js"
- Boom
Preview.js version
1.28.3
Framework
Next.js 14.2.13, React 18.3.1
System Info
System:
OS: Windows 11 10.0.22631
CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
Memory: 14.89 GB / 31.80 GB
Binaries:
Node: 20.17.0 - ~\scoop\apps\volta\current\appdata\tools\image\node\20.17.0\node.EXE
Yarn: 1.22.19 - ~\scoop\apps\volta\current\appdata\bin\yarn.EXE
npm: 10.8.3 - ~\scoop\apps\volta\current\appdata\tools\image\npm\10.8.3\bin\npm.CMD
pnpm: 9.4.0 - ~\scoop\apps\volta\current\appdata\bin\pnpm.EXE
bun: 1.1.25 - ~\.bun\bin\bun.EXE
IDEs:
VSCode: 0.41.2 - c:\Users\jessa\AppData\Local\Programs\cursor\resources\app\bin\code.CMD
Visual Studio: 17.11.35303.130 (Visual Studio Community 2022)
Browsers:
Edge: Chromium (127.0.2651.86)
Internet Explorer: 11.0.22621.3527Used Package Manager
npm
Preview.js logs (check bottom panel in IntelliJ)
[11:38:07.603] ERROR (4176): 500 in endpoint /crawl-file:
[11:38:07.604] ERROR (4176): Cannot read properties of undefined (reading 'length')
err: {
"type": "TypeError",
"message": "Cannot read properties of undefined (reading 'length')",
"stack":
TypeError: Cannot read properties of undefined (reading 'length')
at StringScriptSnapshot.getLength (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:129325:30)
at getSnapshotText (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:130993:33)
at createLanguageServiceSourceFile (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:142659:51)
at acquireOrUpdateDocument (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:134253:28)
at Object.acquireDocumentWithKey (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:134176:14)
at getOrCreateSourceFileByPath (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:142913:33)
at Object.getOrCreateSourceFile (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:142892:16)
at C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:142816:44
at Object.getSourceFileWithCache [as getSourceFile] (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:118637:26)
at findSourceFileWorker (C:\Users\USER\AppData\Roaming\JetBrains\WebStorm2024.2\plugins\previewjs\daemon\dist\node_modules\.pnpm\typescript@5.3.3\node_modules\typescript\lib\typescript.js:120939:25)
}Browser logs (useful for rendering errors)
No response
Repo link (if available)
No response
Anything else?