[BUG] Non-Declarative Method with Typescript

[Alecell]

The non-declarative method with typescript has a type error that says that we need to declare a children inside the Scene.

The point is that, when we use the non-declarative way we would not use children inside the Scene so the component should not throw type error when don't have children.

"react": "17.0.2", "react-dom": "17.0.2", "react-babylonjs": "^3.0.22", "@babylonjs/core": "^4.2.0", "@babylonjs/gui": "^4.2.0", "typescript": "4.3.4",

[brianzinn]

Do you mean that you have ‘<Scene ... />’? I agree that should be allowed, but also if you just want a canvas and Engine and Scene attached without declarative have a look at ‘babylonjs-hook’ NPM. Can you share how you declare your scene?

[Alecell]

Yes, the error shows when I use a <Scene />. Thats the snippet:

function NonDeclarative() {
  return (
    <Engine
      adaptToDeviceRatio
      antialias
      canvasId="babylonJS"
      canvasStyle={{ width: '100%' }}
    >
      <Scene onSceneMount={onSceneMount} />
    </Engine>
  );
}

export const App = () => (
  <div style={{ flex: 1, display: 'flex' }}>
    <NonDeclarative />
  </div>
);

The error shows even when I download the non-declarative example.

[brianzinn]

I’ll fix that. Thank-you for reporting.

[Alecell]

Btw thank your for the recommendation of the babylonjs-hook I was reading about this and makes a lot more sense to use it as I go to the non-declarative approach.

Thanks again 😄