Three-Inspect does not work whether by ImportMap or Vite in plain ThreeJS project

[jonmdev]

I am attempting to run Three-Inspect in a plain ThreeJS project (plain javascript).

Whether I try to load this by import map (eg. using LiveServer add-on in Visual Studio Code) or Vite it does not work.

Utilization

My simple code to try to use this in my project is:

import { createInspector } from 'three-inspect'
import { Inspector  } from 'three-inspect'

/**@type {Inspector}*/
var inspector;
function addInspector(){
	inspector = createInspector({ scene, camera, renderer })
}

Errors

However, this fails no matter how I try to get Three-Inspect running in my project.

1) Import Map

In my index.html I have:

<script type="importmap">
		  {
		    "imports": {
		      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
			  "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
			  "three-inspect": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
		    }
		  }
		</script>

However, while such an approach works well for other packages, on running the application in Visual Studio LiveServer, I get the error:

Uncaught SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/[email protected]/+esm' doesn't provide an export named: 'createInspector'

I am not sure what this represents, but it does not appear to work.

2) Using Vite

I have also tried installing it in Vite with both commands:

npm i --save-dev three-inspect 
npm i --save three-inspect

But when I run npx vite or npx vite build on the project, I get:

✘ [ERROR] Failed to resolve entry for package "@threlte/core". The package may have incorrect main/module/exports specified in its package.json: No known conditions for "." specifier in "@threlte/core" package [plugin vite:dep-pre-bundle]

A fix appears to be posted here for this identical error:

• Can't install #11
• Fix exports for vanilla projects #12

This is also posted as an error here:

• Vanilla JS - failed to resolve @threlte/core #15

A suggestion there as a workaround is:

I have fixed the issue by installing @sveltejs/vite-plugin-svelte with updating vite.config.js :
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
plugins: [..., svelte()],
})

But I am not sure where vite.config.js even is located on my system or whether this is the appropriate way this should be managed.

Based on the fix above, I presume we should not be getting this error.

Solution

Any help with either problem? Currently one cannot use Three-Inspect with any approach in a standard ThreeJS project based on both errors.

It looks like a great project and would be very helpful if working. I would greatly appreciate any further fix.

@michealparks as it appears you fixed this once before I'm wondering if you would be willing to take a look? Thanks for any help.

[michealparks]

Thanks for reporting! The vanilla export has been fixed in 0.5.0. Check out the docs for setup (which has changed) or this stackblitz example: https://stackblitz.com/edit/vitejs-vite-pxodhz?file=src%2Fmain.ts. Let me know if that fixes things for you.

[jonmdev]

Thanks for reporting! The vanilla export has been fixed in 0.5.0. Check out the docs for setup (which has changed) or this stackblitz example: https://stackblitz.com/edit/vitejs-vite-pxodhz?file=src%2Fmain.ts. Let me know if that fixes things for you.

Thank you very much for responding, continuing to maintain the package, and for the tutorial for adding it. I really appreciate it. ThreeJS is very good it seems, but without an inspector it is hard to understand how hierarchies and objects are coming together or test changes. This goes a long way to helping with that.

1) NPM/Vite - Working

I was able to install the 0.5.0 with NPM and npx vite now allows me to see the inspector overlay.

My function was added from yours as:

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,
	});
}

2) Import Map - Not Working

I see you have now also added the package here which is great:

https://www.jsdelivr.com/package/npm/three-inspect

But I am not able to make it work using that. Using the same code above but in LiveServer of Visual Studio Code (just running locally off import maps), I tried in my index.html:

<script type="importmap">
		  {
		    "imports": {
		          "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
			  "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
			  "three-inspect/vanilla": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
		    }
		  }
		</script>

But then I get

Uncaught SyntaxError: The requested module 'https://cdn.jsdelivr.net/npm/[email protected]/+esm' doesn't provide an export named: 'createInspector'

Is there any trick to making it work by import map or any fix that you can further offer? Having it work both ways makes the build and coding process much more versatile and easy to perform.

Thanks again for your help.