Try to open the Inspector using NextJS but it said [ERR_REQUIRE_ESM]

Questions
1

I’ve imported the package directly following the docs.

import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector"
{
scene.debugLayer.show();
}

Then it shows err message below:

require() of ES Module E:\XXX\next-babylonjs1\node_modules\@babylonjs\core\index.js from E:\XXX\next-babylonjs1\node_modules\@babylonjs\inspector\dist\babylon.inspector.bundle.max.js not supported.
Instead change the require of index.js in E:\XXX\next-babylonjs1\node_modules\@babylonjs\inspector\dist\babylon.inspector.bundle.max.js to a dynamic import() which is available in all CommonJS modules.

image
image917×142 6.22 KB

:smile:

2

Hello and welcome to the Babylon community! cc @RaananW

1 Like
3

The inspector package is still not fully esm compatible. We will take care of that as part of the future esm package work. Sorry 'bout that, I don’t have a good solution for that at the moment

4

:smiley:OK,Thank you~

5

Hi, I just came across this issue and have used a dynamic import of a custom component.
Probably not a great solution but seems to work around the ESM issue for local debugging, etc.

Main page where I want to use the debugger:

// set the scene on sceneReady call
let sceneRef = useRef<Scene | null>(null);

// dynamic import of the custom component
const Debugger = dynamic(() => import("../components/Debugger"), {
  ssr: false,
});

...
// in my return render of page
 <Debugger sceneRef={sceneRef} />

My custom component:

import { Scene } from "@babylonjs/core";
import { MutableRefObject } from "react";
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";

const Debugger = ({
  sceneRef,
}: {
  sceneRef: MutableRefObject<Scene | null>;
}) => {
  if (sceneRef.current) {
    sceneRef.current.debugLayer.show();
  }
  return <></>;
};

export default Debugger;

Probably late to the conversation to help @fansticB now, but just in case anyone else runs into this :slight_smile:

6

import(“@babylonjs/inspector”); instead of
import “@babylonjs/inspector”;

2 Likes
7

@11128, yep! much simpler :slightly_smiling_face: !
Although I needed to await the import

As an update to what I posted originally, remove the custom component and have a function call to dynamically import the inspector module (and display the debugger) at the bottom of my onSceneReady function.

Main page where I want to use the debugger

import "@babylonjs/core/Debug/debugLayer";
...
  const runDebugger = async (scene: Scene) => {
    await import("@babylonjs/inspector");
    scene.debugLayer.show();
  };

...

const onSceneReady = async (scene: Scene) => {
  ...
 await runDebugger(scene);
}
10 Likes
8

Thanks for sharing your solution!

9

Thanks for this. This solution should be included in the docs.

1 Like