mobx-view-model

Appearance

Error #1: Active ViewModel not found ​

This happened because vmLookup for useViewModel (React) / useViewModel (Solid) is not provided, and the hook tries to look up the active view model using ActiveViewModelContext, which exists only when using withViewModel / withViewModel.

Explanation ​

This usage:

tsx
const model = useViewModel<YourVM>();

uses ActiveViewModelContext, which exists only under a withViewModel HOC.

This can also happen if you access an active ViewModel that is not an ancestor in the current render tree:

tsx
<Component1>
  <ComponentAChild1>
    <Component>
      {/* useViewModel<YourVM>() here — no active parent */}
    </Component>
  </ComponentAChild1>
  <YourVMComponent /> {/* provides active ViewModel via withViewModel */}
</Component1>

Potential solution ​

Provide <ViewModelsProvider> (React) / <ViewModelsProvider> (Solid) first, then pass a vmLookup to useViewModel:

tsx
const model = useViewModel(YourVM);
const model = useViewModel("idofyourvm");

Without a store, class / id lookup still falls back to ActiveViewModelContext — so vmLookup alone will not fix a missing provider.

Or call useViewModel under the correct active ViewModel in the tree:

tsx
<YourVMComponent> {/* withViewModel */}
  <Component1>
    <ComponentAChild1>
      <Component>
        {/* useViewModel<YourVM>() — OK */}
      </Component>
    </ComponentAChild1>
  </Component1>
</YourVMComponent>

🤖 Prompt for LLM agents ​

Use the following prompt when asking an LLM agent to fix this error:

text
Fix Error #1 in the current repository: "Active ViewModel not found".

Before editing anything, inspect the current repository and confirm that the
error is actually present. Work only inside the current repository; never edit
absolute paths or files in another project. If no affected usage is found,
report that fact and do not create unrelated files.

First check whether the user provided a stack trace, error log, or reproduction
steps. If the trace is missing and the failing call cannot be identified from
the repository, ask the user to provide the full stack trace and the smallest
reproduction before editing. If the repository clearly contains the failing
usage, continue without blocking on an additional trace.

Trace the failing `useViewModel` call and determine whether it is missing a
`vmLookup`/`ViewModelsProvider`, or whether it is rendered outside the
`withViewModel` component that provides the required `ActiveViewModelContext`.
Do not stop after explaining the root cause. If an affected usage is confirmed,
edit the relevant source code and apply the smallest correct fix: connect the
existing store through `ViewModelsProvider` and pass its `vmLookup` when lookup
is intended, or move the call under the correct `withViewModel` ancestor. After
editing, inspect the diff and confirm that the fix removes the missing active
ViewModel path. Do not create a second ViewModel, change unrelated component
structure, or hide the error with a fallback value. If no safe code change can
be made, state the specific blocker instead of claiming that the error is fixed.

Search for all affected usages, preserve existing TypeScript types and
rendering behavior, and change only confirmed occurrences. Add or update a
focused test only if the affected code is covered by the repository's existing
test structure; do not create a new test file merely because this prompt asks
for one. Run the relevant typecheck, lint, and test commands and report the
files changed, root cause, and verification results. The task is complete only
after the confirmed occurrence has been fixed in the repository (or the
concrete blocker has been reported) and the relevant checks have been run.