How do I properly initialize HavokPlugin in BabylonJS 6.18.0

Question

As for the topic, I have a BabylonJS project and want to implement physics, I have upgraded version from 5.57.0 to 6.18.0 so my package.json looks like so

{
  "name": "roulette",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babylonjs/core": "^6.18.0",
    "@babylonjs/havok": "^1.0.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "mobx": "^6.9.0",
    "mobx-react-lite": "^3.4.3",
    "node-sass": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

in my main scene component I import and initialize havok plugin like so,

import {
  ArcRotateCamera,
  DirectionalLight,
  HemisphericLight,
  Mesh,
  Scene,
  Vector3,
} from "@babylonjs/core";
import { HavokPlugin } from "@babylonjs/core/Physics";
import { observer } from "mobx-react-lite";
import type { WheelState } from "../../store/gameStore/types";
import { useStore } from "../../store/rootStoreProvider";
import { SceneComponent } from "./SceneComponent";
import styles from "./spinningWheel.module.scss";
import { createBall } from "./utils/createBall";
import { createGround } from "./utils/createGround";
import { createSkyBox } from "./utils/createSkyBox";
import { createSpinningWheel } from "./utils/createSpinningWheel";

import HavokPhysics from "@babylonjs/havok";

async function getInitializedHavok() {
  return await HavokPhysics();
}

let spinningBase: Mesh;
let ball: Mesh;

const onSceneReady = (scene: Scene) => {
  // scene.debugLayer.show();
  new HemisphericLight("light1", new Vector3(0, 1, 0), scene);
  const light = new DirectionalLight("light", new Vector3(-1, -2, -2), scene);
  light.intensity = 0.3;
  const camera = new ArcRotateCamera(
    "camera",
    -Math.PI * 0.5,
    Math.PI * 0.25,
    12,
    Vector3.Zero(),
    scene
  );
  camera.setTarget(Vector3.Zero());
  const canvas = scene.getEngine().getRenderingCanvas();
  camera.attachControl(canvas, true);
  createSkyBox(scene);
  createGround(scene);
  ball = createBall(scene);
  ball.position.y = 0.7;
  ball.position.x = 1;
  const spinningWheel = createSpinningWheel(scene);
  spinningBase = spinningWheel.spinningBase;

  const havokInstance = getInitializedHavok();
  scene.enablePhysics(
    new Vector3(0, -9.81, 0),
    new HavokPlugin(true, havokInstance)
  );
};

const onRender = (scene: Scene, wheelState: WheelState) => {
  if (spinningBase !== undefined) {
    const deltaTimeInMillis = scene.getEngine().getDeltaTime();

    if (wheelState === "idle") {
      const rpm = 2;
      spinningBase.rotation.y +=
        (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
    }
    if (wheelState === "spinning") {
    }
  }
};

export const SpinningWheel = observer(() => {
  const {
    gameStore: { wheelState },
  } = useStore();
  return (
    <div className={styles.spinningWheelcontainer}>
      <SceneComponent
        antialias
        onSceneReady={onSceneReady}
        onRender={(scene) => onRender(scene, wheelState)}
        id="my-canvas"
        className={styles.canvas}
      />
    </div>
  );
});

and i am getting error that

this._hknp.HP_World_Create is not a function
TypeError: this._hknp.HP_World_Create is not a function
    at new HavokPlugin (http://localhost:3000/static/js/bundle.js:256236:29)
    at onSceneReady (http://localhost:3000/main.ccaac105aa02db67abb4.hot-update.js:65:94)
    at http://localhost:3000/static/js/bundle.js:2203:7
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:37382:30)
    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:38875:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:38847:13)
    at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:38837:11)
    at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:38827:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:40712:7)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:40664:18)

and also after upgrading to version 6 i get error from the inspector

Script error.
    at http://localhost:3000/static/js/bundle.js:49478:58
Cannot read properties of undefined (reading 'Inspector')
TypeError: Cannot read properties of undefined (reading 'Inspector')
    at DebugLayer._createInspector (http://localhost:3000/static/js/bundle.js:84586:23)
    at http://localhost:3000/static/js/bundle.js:84651:16
    at LoadScript.script.onload (http://localhost:3000/static/js/bundle.js:234436:9)

I hope this information is sufficient. Thanks a lot for any help.

Answer 1

        // initialize plugin
        const havokInstance = await HavokPhysics();
        // pass the engine to the plugin
        const hk = new BABYLON.HavokPlugin(true, havokInstance);
        // enable physics in the scene with a gravity
        scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), hk);