# React cra deprecated and react-babylon with physic engine
**URL:** https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365
**Category:** Questions
**Tags:** react-babylonjs, havok
**Created:** [December 13, 2024, 11:41pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365 "2024-12-13T23:41:06Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@Leandro\_Roggerone](https://forum.babylonjs.com/u/Leandro_Roggerone)
#### Post date: [December 13, 2024, 11:41pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/1 "2024-12-13T23:41:06Z")
Hello guys , Im testing react-babylon package.
Currently im getting the “No Physics Engine available.” console message when integrating havok into the project.
First question.
Package documentation suggest to start the project using the CRA script.
Should it be change to other method like vite ? (in my case CRA does not work anymore for new latest versions).
In case of using vite, what is the proper way to integrate havok ?
Some time ago I was recommended to look to [this](https://github.com/minibao/babylon-vite) repo as starting point , but it seem that nobody has updated this.
So in my case I just created a new vite project , install the react-babylon and havok packages and tryed adding [this](https://brianzinn.github.io/react-babylonjs/examples/physics/) code into my App.tsx file but could not succed … im getting the above mentioned message.
Any advice/toughs would be welcome.
Leandro.
---
### Author:  [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [December 13, 2024, 11:57pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/2 "2024-12-13T23:57:20Z")
Package docs don’t (or shouldn’t) recommend using CRA. They do link to CRA examples that are a few years old. Vite would be much better. I’ll try to get a sample up on the docs site (gatsby)
---
### Author:  [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [December 14, 2024, 12:01am UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/3 "2024-12-14T00:01:12Z")
Did you look here - there a physics v2?
[https://brianzinn.github.io/react-babylonjs/examples/physics/](https://brianzinn.github.io/react-babylonjs/examples/physics/)
---
### Author:  [@Leandro\_Roggerone](https://forum.babylonjs.com/u/Leandro_Roggerone)
#### Post date: [December 14, 2024, 2:31pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/4 "2024-12-14T14:31:02Z")
Yep … thats the example I mentioned.
I copied it and removed the bouncing balls.
Then, I got the “No physics engine available” message when trying to apply the physicsAggregate to the ground mesh.
I think it should be something related to vite config.
This is what I have on my vite.config.ts and package.json.
```auto
{
"name": "solid-path",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@babylonjs/core": "^7.39.0",
"@babylonjs/gui": "^7.39.0",
"@babylonjs/havok": "^1.3.10",
"babylonjs-hook": "^0.1.1",
"react": "^18.3.1",
"react-babylonjs": "^3.2.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@eslint/js": "^9.15.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.15.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.12.0",
"typescript": "~5.6.2",
"typescript-eslint": "^8.15.0",
"vite": "^6.0.1"
}
}
```
````auto
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
fs: {
// Allow serving files outside of the root
allow: [
"../.."
]
}
},
optimizeDeps: { exclude: ["@babylonjs/havok"] },
})```
````
---
### Author:  [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [December 14, 2024, 7:04pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/5 "2024-12-14T19:04:49Z")
Could you share the .tsx where you load the havok library and also where you create your scene? Something is not happening there - maybe related to the async nature of loading havok.
The examples main snippets (which are missing error handling) are:
```tsx
import { HavokPlugin } from '@babylonjs/core/Physics/v2/Plugins/havokPlugin'
import HavokPhysics, { HavokPhysicsWithBindings } from '@babylonjs/havok'
...
const [HK, setHK] = useState()
(async () => {
setHK(await HavokPhysics())
})()
return
{HK ? (
...
)}
```
You might not like holding off the scene until the physics is ready, but you could flow state through when the physics is loaded and load the aggregates. There is always an escape hatch to get scene access and apply the physics engine yourself. Can’t really tell unless you provided also that code. If it’s not obvious from your loading code then I could update that project to vite and havok to find the culprit.
edit: if you are using `babylonjs-hook` then the code will be different. Not sure 100% - you’d never need both of those libraries at the same time. I’m going based on the title of this post.
---
### Author:  [@Leandro\_Roggerone](https://forum.babylonjs.com/u/Leandro_Roggerone)
#### Post date: [December 14, 2024, 10:43pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/6 "2024-12-14T22:43:00Z")
Sure , I will push it to github.
please take a look [here](https://github.com/leostereo/react-bbs-poc)
I agree with you that , problem is related to async nature.
You will see that if code changes , the error disappear.
I tryed triggering havok loading and scene rendering from different button events but have no success.
thanks.
---
### Author:  [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [December 15, 2024, 6:53am UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/8 "2024-12-15T06:53:23Z")
hi @Leandro_Roggerone thanks for the repo. I’m able to repro!! First of all, when I remove `..` in your main then it works. So, I looked more and I am calling `enablePhysics` twice. I will fix that, but I don’t think that is causing the issue still (it’s a legacy thing before enablePhysics was part of automatically called functions).
Not sure how to proceed here. I’ll remove that I call it a second time for sure. It’s pretty hard to debug. This shows the second unnecessary call, but also that the second scene that is created has no physics engine.
```tsx
{
console.log('mounted');
const cur = s.scene.enablePhysics;
s.scene.enablePhysics = function (...args) {
console.log('calling enable physics', args);
return cur.apply(s.scene, args);
}
console.log(s.scene.uid);
console.log('physics engine', s.scene.getPhysicsEngine())
}} >
...
```
---
### Author:  [@Leandro\_Roggerone](https://forum.babylonjs.com/u/Leandro_Roggerone)
#### Post date: [December 15, 2024, 2:47pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/9 "2024-12-15T14:47:07Z")
Ok , dont worry , I will continue playing around and investigating a little bit more also.
Anyway , would be great to review the api in order to work with vite script , there are other issues as well , for example when working with mesh/models , im getting similar issue with loader plugin , in that case with “No plugin or fallback for … glb” console message.
Leandro.
---
### Author:  [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [December 16, 2024, 5:59pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/10 "2024-12-16T17:59:50Z")
I’ve never seen any loader issues. Did you specify .glb, but maybe it was a networking/routing issue? Can you put that in your repro? I’m prepping a new release of `react-babylonjs` now that doesn’t double call “enablePhysics” in case there are some re-entrancy issues and I’m adding a callback before it’s called the first time. I am seeing that “enablePhysics” is failing on the second scene being created - stepping through the debugger it’s when the Havok physics engine is being created. stay tuned.
---
### Author:  [@brianzinn](https://forum.babylonjs.com/u/brianzinn)
#### Post date: [December 17, 2024, 12:27am UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/11 "2024-12-17T00:27:15Z")
ok. I dropped a new release. there is an `onCreated` now and `enablePhysics` isn’t double called. so, that removed two question marks that I had. I made a hook (do not use this in production):
```tsx
const useAsyncWithStrict = (
effect: () => Promise,
uniqueRef: React.MutableRefObject>,
dispatch: React.Dispatch>
) => {
const isUnmounted = useRef(false)
useEffect(() => {
(async () => {
const result = await effect();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
console.log('loaded HavokPhysics()', (result as any).InternalError());
if (isUnmounted.current !== true) {
console.log('setting ref:')
uniqueRef.current = result;
dispatch(true)
} else {
console.log('already unmounted - skipping');
isUnmounted.current = false;
}
// physicsPropsRef.current = [null, new HavokPlugin(false, result)];
// (physicsPropsRef.current![1] as unknown as {aa: number}).aa = Math.random()
})();
return () => {
console.log('marking unmounted')
isUnmounted.current = true
dispatch(false)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
}
```
This allows you to for hacky testing ignore the first mount/unmount from StrictMode to do something like this:
```tsx
const YourComponent = () => {
const [physicsReady, setPhysicsReady] = useState(false);
const havokPhysicsRef = useRef>(null);
useAsyncWithStrict(async () => await HavokPhysics(), havokPhysicsRef, setPhysicsReady)
return (
{physicsReady && (
{
console.log(` > scene created: ${scene.uid}`);
const cur = scene.enablePhysics;
scene.enablePhysics = function (...args) {
const wasInitialized = cur.apply(scene, args);
console.log(` > enablePhysics(..) called. Was initialized: ${wasInitialized}`, args[1]?.name);
return wasInitialized;
}
console.log('onCreated -> physics engine', scene.getPhysicsEngine())
}} onSceneMount={({ scene }) => {
console.log('onSceneMount -> physics engine:', scene.getPhysicsEngine());
}} >...
)
}
```
```bash
rendering (physicsReady: yes): with HK App.tsx:95:10
rendering (physicsReady: yes): with HK localhost:5173:1:596
> scene created: f7498488-7b9a-4396-b899-d47fa28b588e App.tsx:107:22
onCreated -> physics engine undefined App.tsx:115:22
> enablePhysics(..) called. Was initialized: true HavokPlugin App.tsx:111:24
onSceneMount -> physics engine:
Object { _physicsPlugin: {…}, _physicsBodies: [], _subTimeStep: 0, gravity: {…} }
App.tsx:117:22
> scene created: f7a0496a-7308-4022-bdac-42747b928b9a App.tsx:107:22
onCreated -> physics engine undefined App.tsx:115:22
BJS - [15:07:10]: o is undefined logger.ts:107:29
> enablePhysics(..) called. Was initialized: false HavokPlugin App.tsx:111:24
onSceneMount -> physics engine: undefined App.tsx:117:22
Uncaught Error: No Physics Engine available.
```
Anyway, it seems like you can’t re-use a `HavokPhysics()`, but then you can in a PG:
[re-use HavokPhysics | Babylon.js Playground](https://playground.babylonjs.com/#TXXYMT)
I tried to follow the `o is undefined` - it’s pretty buried in the Havok Plugin. 🤷 Works without StrictMode obviously still…
lol 😄
---
### Author:  [@Leandro\_Roggerone](https://forum.babylonjs.com/u/Leandro_Roggerone)
#### Post date: [December 21, 2024, 1:04pm UTC](https://forum.babylonjs.com/t/react-cra-deprecated-and-react-babylon-with-physic-engine/55365/12 "2024-12-21T13:04:20Z")
Hi , @brianzinn , I really apreciate your effort and support.
unfortunately I didnt have any free time during this lasts weeks to try this out but I promise I will very soon.