appsmithorg/appsmith · error · URIError
Missing basePageId. If you are trying to set href inside a r
Error message
Missing basePageId. If you are trying to set href inside a react component use the 'useHref' hook.
What it means
Thrown by URLAssembly.resolveEntityIdForApp() when resolving the entity (page) id for URL building. It tries builderParams.basePageId, then builderParams.baseParentEntityId, then this.currentBasePageId; if all three are falsy it throws a URIError telling the caller to use the useHref hook, because outside React context there is no ambient currentBasePageId to fall back on.
Source
Thrown at app/client/src/ce/entities/URLRedirect/URLAssembly.ts:332
const formattedParams = {
staticApplicationSlug: applicationUniqueSlug,
staticPageSlug: pageSlug,
baseApplicationId: this.appParams.baseApplicationId,
basePageId: PLACEHOLDER_PAGE_SLUG,
};
return generatePath(urlPattern, formattedParams).toLowerCase();
}
resolveEntityIdForApp(builderParams: URLBuilderParams) {
const basePageId =
builderParams.basePageId ||
builderParams?.baseParentEntityId ||
this.currentBasePageId;
if (!basePageId) {
throw new URIError(
"Missing basePageId. If you are trying to set href inside a react component use the 'useHref' hook.",
);
}
return basePageId;
}
resolveEntityId(builderParams: URLBuilderParams): string {
return this.resolveEntityIdForApp(builderParams);
}
/**
* @throws {URIError}
* @param builderParams
* @param mode
* @returns URL string
*/
build(builderParams: URLBuilderParams, mode: APP_MODE = APP_MODE.EDIT) {View on GitHub (pinned to 8cd9021c24)
Solutions
- From inside a React component, use the useHref hook (as the message directs) so the ambient page context supplies basePageId.
- When calling the builder imperatively, pass basePageId (or baseParentEntityId) explicitly in URLBuilderParams.
- Ensure the URLAssembly instance's currentBasePageId is set (e.g. via init/setCurrent) before resolving if you manage the instance yourself.
- Defer URL resolution until the page context is available rather than resolving at module-load time.
Example fix
// before (saga/utility, no page context)
const href = urlBuilder.build({ pageId })
// throws: Missing basePageId...
// after (in a component)
const href = useHref({ pageId })
// or pass it explicitly:
const href = urlBuilder.build({ pageId, basePageId: currentPageId }) Defensive patterns
Strategy: type-guard
Validate before calling
function resolveBuilderParams(p: URLBuilderParams, currentBasePageId?: string) {
const basePageId = p.basePageId || p.baseParentEntityId || currentBasePageId;
if (!basePageId) throw new Error('Pass basePageId or call from a component via useHref.');
return { ...p, basePageId };
} Type guard
function hasBasePageId(p: URLBuilderParams): p is URLBuilderParams & { basePageId: string } {
return Boolean(p.basePageId || p.baseParentEntityId);
} Try / catch
try { return builder.resolveEntityId(params); } catch (e) {
if (/Missing basePageId/i.test(e.message)) return useHref(params); // only valid inside a component
throw e;
} Prevention
- Prefer the useHref hook inside components so page context is ambient.
- Pass basePageId explicitly whenever calling the builder from a saga/utility.
- Set URLAssembly.currentBasePageId at route entry so non-component callers have a fallback.
When it happens
Trigger: Calling resolveEntityIdForApp()/resolveEntityId() (or a builder that uses them) outside a component where basePageId/baseParentEntityId are not supplied AND the URLAssembly instance has no currentBasePageId set — typically building an href from a plain module/saga/utility rather than from a React component.
Common situations: Generating a page href in a Redux saga, a selector, or a non-React utility where the ambient page id is unavailable; refactoring href construction out of a component and dropping the pageId argument; calling the URL builder before the current page is loaded.
Related errors
- FormControl compound components cannot be rendered outside t
- useSidebar must be used within a SidebarProvider.
- error
- Your project's `baseUrl` can only be set to `src` or `node_m
- You have both a tsconfig.json and a jsconfig.json. If you ar
AI-assisted analysis of appsmithorg/appsmith@8cd9021c24 (2026-08-12).
Data as JSON: /api/errors/a4a7c864dc940651.
Report an issue: GitHub.