UI sometimes show error "can't access property "resolved", ne[r] is undefined

Here is a backtrace when running in dev-mode:

Uncaught TypeError: can't access property "resolved", inputAndUiData.model[currentComponent] is undefined
    InputBehaviorsComponentPropsForm InputBehaviorsComponentPropsForm.tsx:282
    InputBehaviorsWrapper inputBehaviors.tsx:313
    React 18
    Redux 9
    rtkQueryErrorHandler rtkQuery-error.ts:123
    Redux 2
    undoRedoActionIdMiddleware store.ts:208
    Redux 10
    createImmutableStateInvariantMiddleware Immutable
    createActionCreatorInvariantMiddleware Redux
    updateSelectionInRedux useComponentSelection.ts:154
    handleComponentSelection useComponentSelection.ts:201
    handleComponentClick ComponentOverlay.tsx:134
    React 27
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-OCBYBPSH.js:15
    js index.js:6
    __require chunk-OCBYBPSH.js:15
    React 2
    __require chunk-OCBYBPSH.js:15
    js

It seems to process the input-form of the *previous* component, then breaks. Because of that the bug appears only when navigating FROM certain components to it.

Somehow this is broken for extjs components that have no props, while it works for other (e.g. js) components that have no props.
Not sure why, but in the extjs-component case the effect for fetch the form does not trigger.

It might be that React is batching updates for:
- Line 393: setDynamicStaticCardQueryString('')
- Line 412: setDynamicStaticCardQueryString(queryString)
so that RTK Query reads the state BEFORE the second update applies

I tried removing the first setDynamicStaticCardQueryString('') since it gets overwritten anyway later, but that did only partially solve. The problem was still triggered often, it seems there is a race condition somewhere.

So we need to reliably clear the the form content when the component is changed -> added a useEffect() for that;

diff --git a/ui/src/components/ComponentInstanceForm.tsx b/ui/src/components/ComponentInstanceForm.tsx
index 889086d6..1e73e585 100644
--- a/ui/src/components/ComponentInstanceForm.tsx
+++ b/ui/src/components/ComponentInstanceForm.tsx
@@ -78,6 +78,13 @@ const ComponentInstanceFormRenderer: React.FC<
   const [currentComponentId, setCurrentComponentId] = useState<string | null>(
     null,
   );
+
+  // Clear form HTML immediately when selected component changes to prevent
+  // stale form from being rendered with the new component's context.
+  useEffect(() => {
+    setJsxFormContent(null);
+  }, [selectedComponent]);
+
   const formRef = useRef(null);
   const selectedComponentId = selectedComponent || 'noop';
   const skip = useAppSelector((state) =>

That somewhat works, the error still happens in console-log, but it's not visible any more. Still the underlying is not yet fixed it seems.

The useEffect runs too late, the error is still happening before. The useEffect just triggers another update that makes the error go away visually. I was able to make it work by skipping this too-early triggered form-re-rendering when the selected-component is not the current component. That seems to fix it!

Created #3559574: UI shows error 'can't access property "resolved", ne[r] is undefined' with extjs-components having no props for fixing this in canvas. Leaving this issue open for everyone to find it easily.
Note: After applying the fix in canvas you need to re-build the canvas/ui - run "npm run build" in the ui directory (for details: see canvas docs)

this is fixed with canvas 1.0.0 :-)