Menu
Registers an existing module in the shell host app. Use when wiring a new or existing module into the running application.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Adds zone-based layout regions to the shell that modules populate per-route or per-active-tab. Use when the shell layout has dynamic panels, sidebars, or header regions that change based on the current route or active module.
Creates a per-entity scoped Zustand store using createScopedStore(). Use when you need independent state instances keyed by ID — per-interaction tabs, per-conversation messages, per-workspace scratchpads, etc.
Adds slot-based extensibility to the application — defines slot types in app-shared, contributes items from modules, and consumes them in the shell. Use when the shell needs to collect and render contributions from multiple modules (command palettes, system registrations, dashboard widgets, etc.).
Writes tests for a Reactive module using @tanstack-react-modules/testing with renderModule(), resolveModule(), and createMockStore(). Use when adding or updating tests for module components, routes, or slot contributions.
Adds a new shared dependency (zustand store, plain service, or reactive service) to the AppDependencies contract and wires it into the shell. Use when adding new cross-cutting concerns like analytics, feature flags, call adapters, or notification services.
Adds data fetching to a module component using React Query with Lokalise HTTP client and API contracts. Use when a component needs to fetch, create, update, or delete server data, or when integrating a new backend contract.
| name | register-module |
| description | Registers an existing module in the shell host app. Use when wiring a new or existing module into the running application. |
| metadata | {"author":"reactive","version":"1.0"} |
After creating a module, it must be registered in the shell (host app) to appear in the running application.
Note:
reactive create modulehandles registration automatically. These manual steps are only needed when registering a module that was created without the CLI.
In examples/shell/package.json, add the module to dependencies:
{
"dependencies": {
"@example/<module-name>-module": "workspace:*"
}
}
Run pnpm install to link.
In examples/shell/src/main.tsx:
import newModule from "@example/<module-name>-module";
// After createRegistry and before resolve:
registry.register(newModule);
pnpm --filter shell dev
The module's routes and navigation items should appear immediately. The sidebar auto-generates from the navigation manifest.
For large modules that should load on demand:
registry.registerLazy({
id: "<module-name>",
basePath: "/<module-path>",
load: () => import("@example/<module-name>-module"),
});
The module's code is only fetched when the user navigates to the base path.
When registry.resolve() runs, it validates:
id: 'billing' will throw.requires: ['auth', 'analytics'] and analytics is not in the registry config, it throws with a clear error listing available deps.If validation fails, the error message tells you exactly what's missing:
[@tanstack-react-modules/runtime] Module "billing" requires dependencies not provided
by the registry: analytics. Available: auth, config, httpClient
// 1. Create registry with shared dependencies
const registry = createRegistry<AppDependencies>({
stores: { auth: authStore, config: configStore },
services: { httpClient },
})
// 2. Register modules (order doesn't matter)
registry.register(billing)
registry.register(users)
registry.register(newModule)
// 3. Resolve - validates everything, builds route tree, returns App
const { App } = registry.resolve({
rootComponent: Layout,
indexComponent: Home,
})
// 4. Render
createRoot(document.getElementById('root')!).render(<App />)
resolve(). Registering after throws an error.resolve() can only be called once. Calling it again throws an error.order field in navigation items and the route paths themselves.AppDependencies - only modules typed with the same contract can be registered.