ThreeJS Inspector package works in NPX Vite but not as ImportMap?

I found a fantastic package for providing a real time Inspector. It works great in NPX Vite but does not work by ImportMap. I raised this with the developer here and while he fixed the NPX side, there was no reply on the ImportMap, which makes me think he is not sure either.

Is there any reason a package would work well by NPX but not by ImportMap? I don’t understand these enough to know or if anything could be done to fix it.

Project links:

To demonstrate I created a simple project you can see here:

This was made just by copying and pasting in the standard new project configuration here: three.js docs

then installing in command prompt:

npm install --save three
npm install --save-dev vite
npm i --save three-inspect

The code to add the Inspector is:


import { createInspector } from 'three-inspect/vanilla'
function addInspector(){
	document.body.append(renderer.domElement);
        renderer.domElement.style = `
                width: 100%;
                height: 100%;
                position: absolute;
        `;
        createInspector(document.body, {
                scene,
                camera,
         	renderer,
        });
}

addInspector();

If you do this, and run NPX Vite, then O, you get the following scene - spinning default cube with inspector overtop:

This allows you to quickly manipulate and test hierarchies, colors, positions, and is very handy for seeing what is or isn’t working in a project.

However, if we instead try to run it off ImportMap (for example in Visual Studio Code LiveServer) with the following:

<script type="importmap">
		  {
		    "imports": {
		      	"three": "https://cdn.jsdelivr.net/npm/three@v0.163.0/build/three.module.js",
			"three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.163.0/examples/jsm/",
			"three-inspect/vanilla": "https://cdn.jsdelivr.net/npm/three-inspect@0.5.0/+esm"
		    }
		  }
		</script>

This does not work. It gives the error **Uncaught SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/three-inspect@0.5.0/+esm' doesn't provide an export named: 'createInspector'**

Do you know why this might be happening? Why would it work perfectly by Vite but not ImportMap?

Is there some trick with the ImportMap? I really need it working both ways.

Any thoughts or ideas for a workaround? Or any ideas for a a solution I can pass onto the developer for a hopeful fix?

Addendum

I notice if I go directly in my browser to:

which are working packages they show nice clear pages there that look appropriate. But if I go to:

I get:

So is this then the problem? Is the package on there broken somehow or not generated correctly? If so any idea for a fix? Thanks again.