#164: WIP still...

src/ReactBabylonJSHostConfig.ts

@@ -591,16 +591,20 @@ const ReactBabylonJSHostConfig: HostConfig<
   // ReactDOM uses this for attaching child nodes to root DOM.  For us we want to link the all parts of tree together for tree crawling.
   // same implementation as insertInContainerBefore
   appendChildToContainer: (container: Container, child: HostCreatedInstance<any>): void => {
-    console.log('appending', child, container);
     if (child) {
-      // doubly link child to root
-      container.rootInstance.children.push(child);
-      child.parent = container.rootInstance;
-
-      // hostInstance is undefined when using "assignFrom".
-      if (child.hostInstance === undefined && child.lifecycleListener) {
-        // From perspective of declarative syntax the "Scene" is the parent.
-        child.lifecycleListener!.onParented(container.rootInstance, child);
+      if (container.rootInstance) {
+        // doubly link child to root
+        container.rootInstance.children.push(child);
+        child.parent = container.rootInstance;
+
+        // hostInstance is undefined when using "assignFrom".
+        if (child.hostInstance === undefined && child.lifecycleListener) {
+          // From perspective of declarative syntax the "Scene" is the parent.
+          child.lifecycleListener!.onParented(container.rootInstance, child);
+        }
+      } else {
+        console.log('addend child with no root (createPortal only?)')
+        addChild(container as unknown as CreatedInstance<any>, child);
       }
     }
   },

storybook/stories/babylonjs/Basic/portal.stories.js

@@ -1,7 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import '@babylonjs/inspector';
 import { Engine, Scene, useBeforeRender, createPortal } from '../../../../dist/react-babylonjs';
-import { Vector3 } from '@babylonjs/core/Maths/math'
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { Color3 } from '@babylonjs/core/Maths/math.color';
 import '../../style.css'
 
 export default { title: 'Babylon Basic' };
@@ -28,7 +29,9 @@ function WithCreatePortal() {
     <>
       <transformNode name="transform-node" ref={transformNodeRef}>
         {(transformNodeRef.current) &&
-          createPortal(<box position={new Vector3(0, 1, 0)} />, transformNodeRef.current['__rb_createdInstance'])
+          createPortal(<box position={new Vector3(0, 1, 0)}>
+            <standardMaterial diffuseColor={Color3.Blue() } specularColor={Color3.Black()} />
+          </box>, transformNodeRef.current['__rb_createdInstance'])
         }
         <ground name='ground1' width={6} height={6} subdivisions={2} position={new Vector3(0, 0, 0)} />
       </transformNode>