Skip to content

Error #1: Active ViewModel not found

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

Explanation:

This usage of hook useViewModel

tsx
const model = useViewModel<YourVM>();

Will use ActiveViewModelContext which exist only with usage withViewModel HOC.

This can also happen if you are trying to access an active ViewModel that does not exist in the current React render tree:

tsx
<Component1>
  <ComponentAChild1>
    <Component>
      useViewModel<YourVM>()
    </Component>
  </ComponentAChild1>
  <YourVMComponent /> - this provide active `ViewModel` (withViewModel)
</Component1>

Potential solution

The potential solution to this problem is to pass the vmLookup to the useViewModel hook:

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

Or use useViewModel<YourVM>() with the correct active ViewModel in the React render tree:

tsx
<YourVMComponent> - this provide active `ViewModel` (withViewModel)
  <Component1>
    <ComponentAChild1>
      <Component>
        useViewModel<YourVM>()
      </Component>
    </ComponentAChild1>
  </Component1>
</YourVMComponent>

Released under the MIT License.