importLatest resolves the latest version of a Val Town module at runtime, bypassing cached redirects. It works by first issuing a HEAD request to the esm.town/v/ URL to follow its redirect to the versioned URL, then dynamically importing from that resolved URL.
This is useful during active development when you need to pick up changes to a dependency immediately — for example, when iterating on a shared utility alongside a feature that consumes it.
Note: Switch back to static
importstatements before shipping to production. Static imports benefit from lockfile caching, version pinning, and faster cold starts.
Given a dependency:
// user/dependency/main.tsx
export const foo = "old value";
All three of these initially evaluate foo as "old value":
import { foo } from "user/dependency/main.tsx";
const { foo } = await import("user/dependency/main.tsx");
const { foo } = await importLatest("user/dependency/main.tsx");
After the dependency is updated:
export const foo = "new value";
Static and dynamic imports remain stuck on the cached value, while importLatest fetches the latest:
import { foo } from "user/dependency/main.tsx"; // foo === "old value"
const { foo } = await import("user/dependency/main.tsx"); // foo === "old value"
const { foo } = await importLatest("user/dependency/main.tsx"); // foo === "new value"
| Parameter | Type | Description |
|---|---|---|
url | string | The esm.town/v/ URL of the module to import |
Returns: A promise that resolves to the module's exports.
Throws: If the HEAD request fails, returns a non-OK status, or the resolved URL cannot be imported.
importLatestmust be called after all staticimportstatements, as static imports are hoisted and must be resolved first.
import { staticImport } from "...";
import importLatest from "https://esm.town/v/peterqliu/importLatest";
const { gimmeLatest } = await importLatest("https://esm.town/v/me/thisDependencyJustChanged");