Three-Inspect not working by ImportMap ... Package on JSDelivr says: "Failed to bundle using Rollup v2.79.1: failed to resolve an internal import." Any ideas?

[jonmdev]

I am continuing to need to rely on this package to help me inspect my plain JS Three-JS projects. As noted in the prior thread with 0.5.0 it now works in NPX Vite. However, it still does not work by ImportMap.

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

https://github.com/jonmdev/inspectorbug

This was made just by copying and pasting in the standard new project configuration here: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

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 in main.js 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 enter 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.

Problem

However, if we instead try to run it off ImportMap (for example by opening in Visual Studio Code, adding the "LiveServer" addon, and clicking its icon in the bottom right) with the following in index.html:

<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?

Issue?

I notice if I go directly in my browser to:

• https://cdn.jsdelivr.net/npm/three@v0.163.0/build/three.module.js
• https://cdn.skypack.dev/@dimforge/rapier3d-compat

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

• https://cdn.jsdelivr.net/npm/three-inspect@0.5.0/+esm

I get:

• Failed to bundle using Rollup v2.79.1: failed to resolve an internal import.
• If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr
  throw new Error('Failed to bundle using Rollup v2.79.1: failed to resolve an internal import. If you believe this to be an issue with jsDelivr, and not with the package itself, please open an issue at https://github.com/jsdelivr/jsdelivr');

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

@michealparks