fix(frotnend): fix icons kiling the bundle

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4450 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
frontend-inspector	😴 Sleeping (View Logs)	Web	Mar 17, 2026 at 11:20 pm
frontend-cloud	😴 Sleeping (View Logs)	Web	Mar 17, 2026 at 11:18 pm
website	❌ Build Failed (View Logs)	Web	Mar 17, 2026 at 11:12 pm
mcp-hub	✅ Success (View Logs)	Web	Mar 17, 2026 at 11:10 pm
ladle	❌ Build Failed (View Logs)	Web	Mar 17, 2026 at 11:09 pm

[jog1t]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• fix(frontend): remove flashing upgrade notice #4451
• fix(frotnend): fix icons kiling the bundle #4450 👈 (View in Graphite)
• feat(frontend): ping actor if its in the crash loop #4448
• fix(engine): use proper paths for settings #4447
• feat(frontend): add outdated indicator to runners #4446
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[pkg-pr-new]

More templates

• actor-actions
• actor-actions-vercel
• ai-agent
• ai-agent-vercel
• example-ai-and-user-generated-actors-freestyle
• chat-room
• chat-room-vercel
• example-cloudflare-workers
• example-cloudflare-workers-hono
• collaborative-document
• collaborative-document-vercel
• cross-actor-actions
• cross-actor-actions-vercel
• example-cursors
• example-cursors-raw-websocket
• example-cursors-raw-websocket-vercel
• example-cursors-vercel
• custom-serverless
• example-elysia
• example-experimental-durable-streams-ai-agent
• example-experimental-durable-streams-ai-agent-vercel
• geo-distributed-database
• geo-distributed-database-vercel
• hello-world
• hello-world-vercel
• example-hono
• hono-react
• hono-react-vercel
• example-kitchen-sink
• example-kitchen-sink-vercel
• multi-region-vercel
• multiplayer-game
• example-multiplayer-game-patterns
• example-multiplayer-game-patterns-vercel
• multiplayer-game-vercel
• native-websockets
• native-websockets-vercel
• next-js
• per-tenant-database
• per-tenant-database-vercel
• example-raw-fetch-handler
• example-raw-fetch-handler-vercel
• example-raw-websocket-handler
• example-raw-websocket-handler-proxy
• example-raw-websocket-handler-proxy-vercel
• example-raw-websocket-handler-vercel
• example-react
• example-react-vercel
• sandbox
• sandbox-coding-agent
• sandbox-coding-agent-vercel
• sandbox-vercel
• scheduling
• scheduling-vercel
• example-sqlite-drizzle
• example-sqlite-raw
• state
• state-vercel
• example-stream
• example-stream-vercel
• example-trpc

@rivetkit/virtual-websocket

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/virtual-websocket@4450

@rivetkit/cloudflare-workers

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/cloudflare-workers@4450

@rivetkit/framework-base

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/framework-base@4450

@rivetkit/next-js

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/next-js@4450

@rivetkit/react

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/react@4450

rivetkit

pnpm add https://pkg.pr.new/rivet-dev/rivet/rivetkit@4450

@rivetkit/sql-loader

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sql-loader@4450

@rivetkit/sqlite-vfs

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/sqlite-vfs@4450

@rivetkit/traces

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/traces@4450

@rivetkit/workflow-engine

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/workflow-engine@4450

@rivetkit/engine-runner

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner@4450

@rivetkit/engine-runner-protocol

pnpm add https://pkg.pr.new/rivet-dev/rivet/@rivetkit/engine-runner-protocol@4450

commit: 9400b6d

[claude]

PR Review: fix(frontend): fix icons killing the bundle

Summary

The PR addresses a real problem: @rivet-gg/icons was eagerly imported with import * as allIcons from "@rivet-gg/icons" in actor-builds-list.tsx, forcing the entire icon bundle into the initial JS chunk. The fix uses React 19 use() hook with Suspense and a dynamic import. The build script switches from outfile to outdir with splitting: true.

Critical Issues

1. Spurious dist/index.gen.js committed to git (frontend/packages/icons/dist/index.gen.js, +79,224 lines)

This is a side effect of switching from outfile: dist/index.js to outdir: dist/. With outdir, esbuild mirrors the input filename so src/index.gen.js produces dist/index.gen.js, not dist/index.js. The package.json exports field still points to ./dist/index.js, so this file is never consumed. It inflates the repo by 79K lines with no benefit.

Fix: add entryNames: "index" to the esbuild config and remove dist/index.gen.js from the commit.

2. statSync("index.js") will throw on a clean build (frontend/packages/icons/scripts/vendor-icons.js, line 302)

With outdir and no entryNames override, a fresh run outputs index.gen.js, not index.js. The statSync call will throw ENOENT after a successful esbuild run, making the script abort with a misleading error. The naming mismatch needs to be resolved (see issue 1).

3. CLAUDE.md commit checklist not updated (frontend/packages/icons/CLAUDE.md, line 13)

The checklist says to commit dist/index.js. A second file dist/index.gen.js now also exists. Contributors following the checklist will be confused.

Moderate Issues

4. No error boundary for the lazy icon import (frontend/src/app/actor-builds-list.tsx)

use(allIconsPromise) re-throws a rejected Promise (e.g., network error, CSP block). There is a Suspense fallback but no ErrorBoundary, so a module-load failure could crash a larger subtree. Consider graceful degradation by chaining .catch(() => ({})) on allIconsPromise.

5. Per-item Suspense boundaries are redundant (frontend/src/app/actor-builds-list.tsx, lines 89-99)

All ActorIcon instances share the same allIconsPromise — they suspend and unsuspend simultaneously. Wrapping each list item in its own Suspense creates unnecessary overhead. A single boundary at the list level is semantically identical and simpler.

Minor Issues

6. splitting: true is likely a no-op (frontend/packages/icons/scripts/vendor-icons.js, line 294)

esbuild splitting is effective for multiple entry points or explicit dynamic imports within source. index.gen.js is a flat single-entry file with no internal dynamic imports, so esbuild is unlikely to produce additional chunks. The bundle-size improvement comes entirely from the consumer dynamic import call in React, not from esbuild chunk splitting.

7. @fortawesome/free-regular-svg-icons externalized but not declared as peer dependency (vendor-icons.js, line 276)

This package is in the freePackages external list but absent from package.json peerDependencies. If any icons reference it at runtime, consumers will get a module-not-found error unless they happen to have installed it independently.

What Is Good

• Dynamic import() + use() + Suspense is the correct React 19 idiom for lazy-loading a large module.
• Removing @rivet-gg/icons from optimizeDeps.include in vite.base.config.ts is correct since Vite should not pre-bundle a lazily-loaded module.
• Dropping the require export condition is correct for an ESM-only package.
• The actorMeta optional chaining fixes a latent runtime crash when build.name.metadata is undefined.
• Externalizing only the free FA packages in the vendor script is the right call.

Summary

The core approach (lazy dynamic import) is correct and the performance win is real. The main blocker before merging is the 79K spurious file in dist/ and the statSync naming mismatch that will break a clean vendor script run.