Bundling or hosting inspector locally, without breaking VUE types

I was using inspector feature before installing it separately, the app fetches inspector code from unpkg.com.
the problem is unpkg.com is not always available on my network environment, so I tried bundling it into my project by installing @babylonjs/inspector.
The project dependency before (only related):

    "babylonjs": "^5.31.0",
    "babylonjs-loaders": "^5.31.0",
    "vue": "^3.2.41",
    "typescript": "^4.6.4",
    "vite": "^3.2.0",
    "vue-tsc": "^1.0.20"

then I installed @babylonjs/inspector, the IDE warns all class prop in the vue template (by vscode volar plugin).

after a little diagnose work, I found @babylonjs/inspector installed some react type, like @types/react-dom, which breaks vue’s default dom types.

so here is my request:

  • I want to fetch inspector code from within my project, without breaking types, or
  • I want to designate babylon.inspector.bundle.js location to my own CDN

Thanks.

cc @RaananW

The inspector is available on our CDN and in the github releases to download. You can download it and host it on your CDN, of course.
Also - I would recommend not mixing the package types (if you still want to use the npm packages), so the package type that should work in your configuration is the babylonjs-inspector , otherwise you will have a lot of new packages introduced.

Thanks for reply.

BTW, if I successfully download it and host it on my CDN, how could babylonjs know where it is? Should I configure something, or it will automatically detect after a script tag to that js file is introduced?

The best recommendation would be to load it along with babylon.js. If you want to use the automatic download mechanism you can change the location of the file to be downloaded using:

BABYLON.DebugLayer.InspectorURL = 'the URL!'