React-babylonjs - properties (arcRotateCamera...) does not exist on type "JSX.IntrinsicElements"

nogalo · March 5, 2025, 3:51pm

Hi. I am updating my React, Typescript, Babylonjs setup and with the latest versions I am encountering some issues.

Specifically regarding react-babylonjs package, which I usually use for some basic starting setup, and I’ve been using it the same way across multiple projects so far. But now I encounter this issue.

arcRotateCamera and hemisphericLight does not exist on type “JSX.IntrinsicElements”

Not sure what’s this about and how to go about it. I can completely ditch react-babylonjs and go with alternative setup but I really like using it, and would like to continue to do so.

Here are my deps and versions

nogalo · March 5, 2025, 5:50pm

After some research it seems that issue is due to latest react 19.0 version and compatibility with react-babylonjs.

Specifically it seems that issue comes from the react 19 global namespace deprication

github.com/Automattic/jetpack

React 19 Compatibility: Global JSX namespace removal

opened 01:48PM - 26 Jul 24 UTC

closed 07:17AM - 30 Jul 24 UTC

coder-karen

### Issue In React 19, the global JSX namespace will be removed ( [react.dev …blog reference](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript) ). The deprecation is highlighted within code editors using ESLint's `deprecation/deprecation` rule (in VSCode for example by hovering over an instance of 'JSX.Element': <img width="456" alt="Screenshot 2024-07-26 at 14 34 14" src="https://github.com/user-attachments/assets/ecbe7054-e38c-4a50-904a-3ad5dcdff672"> Parent React compatibility issue: https://github.com/Automattic/jetpack/issues/37951 ### Solutions The linked React blog suggests adding the namespace in a `global.d.ts` file or similar - assuming we want to continue using the JSX global namespace. Now that `React.JSX` is favored, we can also use that directly, which has been used in a couple of places throughout the code such as in the `ai-assistant-plugin`.

And react-babylonjs uses this global namespace declaration

Seems that currently react-babylonjs is not compatible with the react 19.

RaananW · March 5, 2025, 6:34pm

cc @brianzinn

brianzinn · March 5, 2025, 8:09pm

hi @nogalo - thanks for bringing up the issue. I saw somebody did a fork with React 19, but only the deps. Maybe they came across similar issue.

that looks like a small change - i can drop that in no worries. i’m just heading on a flight to Vegas - not back till late Sunday. I can see on Monday, if my brain is operational.

if somebody wanted to give it a go - I think it’s just a change here on the codegen:
react-babylonjs/packages/react-babylonjs/tools/generate-code.ts at master · brianzinn/react-babylonjs

the namespace needs to be React.JSX. I think I will maintain both (that + global) for backwards compatibility. I wonder if it will stop conflicting with “button”, “polygon”, “text”, etc. I had to track those and rename:
react-babylonjs/packages/react-babylonjs/tools/generate-code.ts at master · brianzinn/react-babylonjs

if anybody makes the change themselves - run the generate script and “npm link” to test it locally.

barisozcetin · March 6, 2025, 12:20am

I tried updating the namespaces but unfortunately it’s not enough. looks like there are changes to reconciler API so custom reconciler stuff should get updated as well. I’ll check some more to see if i can get it working

brianzinn · March 10, 2025, 9:51pm

hi - yes. Welcome to the forum @barisozcetin i’m just seeing that today the changes are not as easy and cannot be backwards compatible. will need to bump library to v4 - lots of breaking changes in React 19 - even the new reconciler as you mentioned. I don’t know if you want to share where you landed - we could work on a PR together if you like. Cheers.

Deltakosh · March 10, 2025, 10:00pm

If only everyone was respectful towards their users with backward compat

barisozcetin · March 11, 2025, 7:45am

I got it working with primitive elements but asset manager fails if i try to load an external model. I made fork and pushed my changes to here if you want to take a look: GitHub - barisozcetin/react-babylonjs at react19
most of the changes are in ReactBabylonJSHostConfig file. i tried to add the new methods required for react-reconciler but i’m not really familiar with so my changes are mostly try and fail based. there are new fields related to suspend and i wasn’t sure how to handle those. Also they got rid of forwardRef in react 19 now, and Model component uses forwardRef. that’s one other issue that needs to be solved. That might be the reason why i couldn’t load the external model.

I’ll let you know if i can figure out anything else. If it’s helpful i can definitely help making a pr

brianzinn · March 11, 2025, 7:53pm

thanks - that’s a good start. i see you upgraded the reconciler to 0.31. I’ll look through the host config differences - there’s definitely some parts of the system expecting the host elements to be created in a certain order - that hopefully didn’t change! i’m really busy this week with work, but will see how it goes and will try to look. looks like a great start though. cheers.

brianzinn · March 17, 2025, 11:06pm

hi @barisozcetin - maybe it’s easier if you make a PR with your fork? i was going to fork your fork and then realized not sure how that works, since it’s originally from my repo? I think I will maintain a <= 18 version on 3.x and 19 on 4.x.

I have to think if it’s a good time to introduce other breaking changes. I’ve been wanting to build a declarative XR - waiting on apple, but it’s just getting silly waiting on apple and the VR examples are obsolete.

barisozcetin · March 18, 2025, 3:36am

Hi @brianzinn . Made a pr here: Support React 19 by barisozcetin · Pull Request #357 · brianzinn/react-babylonjs · GitHub

The type definitions and documentation for react-reconciler 0.31 doesn’t match so it can be tricky to work on that part. For example looks like they removed updatePayload from commitUpdate function but type definition is not updated

github.com/facebook/react

Reconciler: Change `commitUpdate` signature to account for unused `updatePayload` parameter

main ← eps1lon:cleanup-diffInCommit-unused-updatePayload

opened 02:45PM - 25 Apr 24 UTC

eps1lon

+2 -29

`diffInCommitPhase` is shipped (https://github.com/facebook/react/pull/27409) so… we don't need to pass along `updatePayload` which is always `null`. `react-three-fiber` was bailing out if this payload was `null` and therefore never committed any update. By changing the signature the breakage becomes more obvious. The docs already document the proposed signature: https://github.com/facebook/react/blob/main/packages/react-reconciler/README.md#commitupdateinstance-type-prevprops-nextprops-internalhandle

github.com/DefinitelyTyped/DefinitelyTyped

types/react-reconciler/index.d.ts

master

import { Component, ReactNode } from "react";

/* eslint-disable @definitelytyped/no-unnecessary-generics */
declare function ReactReconciler<
    Type,
    Props,
    Container,
    Instance,
    TextInstance,
    SuspenseInstance,
    HydratableInstance,
    PublicInstance,
    HostContext,
    UpdatePayload,
    ChildSet,
    TimeoutHandle,
    NoTimeout,
>(
    /* eslint-enable @definitelytyped/no-unnecessary-generics */
    config: ReactReconciler.HostConfig<

This file has been truncated. show original

Topic		Replies	Views
React-babylonjs v2.0 Announcements	4	1812	December 17, 2019
<babylon> tag doesn't work with React Bugs react	13	1738	November 18, 2020
Camera view in React component Questions	2	720	April 7, 2021
SceneLoader.ImportMeshreact + babylon Questions react	3	905	March 1, 2021
Controlling the Render Pipeline with Typescript Questions	5	1127	July 27, 2019

React-babylonjs - properties (arcRotateCamera...) does not exist on type "JSX.IntrinsicElements"

Related topics