Three-mesh-ui "Failed to resolve module specifier"

Questions
, ,
1

Hi,
I’m buil three-mesh-ui library and I have test this in localhost,
but when I upload the project to the server, chrome console show this error :
Uncaught TypeError: Failed to resolve module specifier “three/examples/jsm/utils/BufferGeometryUtils.js”. Relative references must start with either “/”, “./”, or “…/”.

This is the import in my code :

import * as THREE from ‘three’;
import { VRButton } from “https://unpkg.com/three@0.142.0/build/three.module.js”;
import { BoxLineGeometry } from “https://unpkg.com/three@0.142.0/examples/jsm/geometries/BoxLineGeometry.js”;
import { OrbitControls } from “https://unpkg.com/three@0.142.0/examples/jsm/controls/OrbitControls.js”;

what’s the problem?
I think it is related to the server configuration but I don’t know why.can someone help me please? Thanks.

2

this looks odd, you’re pulling in all kinds of different threejs versions, relying on internals like three.module.js, mixing local “three” with remote bundled from unpkg. if i’m not mistaken this will pull 2-3 full threejs into your app, they have nothing to do with one another and will happily conflict. the only valid import is “three”.

unpkg is a remote bundler, if you want to use unpkg, and i can’t fathom why you would, you must pull everything from unpkg (including 3rd party dependencies) or else module resolution goes to hell. better use a bundler yourself, like vite, and all these problems will go away.

in a sane environment this is how it’s supposed to look:

import * as THREE from "three"
import { VRButton } from "three/examples/jsm/webxr/VRButton"
import { BoxLineGeometry } from "three/examples/jsm/geometries/BoxLineGeometry"
import { OrbitControls } from “three/examples/jsm/controls/OrbitControls"
3

Thank you, I’m tried the your resolution but the error persist.

4

You probably need an import map for the modifier ‘three’ to be available inside classes that you import, also, VRButton is not a part of the library. This work for me w/o errors:

<script type="importmap">
{
	"imports": {
  	"three": "https://unpkg.com/three@0.141.0/build/three.module.js"
	}
}
</script>
<script type="module">
  import * as THREE from 'three'
	import { VRButton } from 'https://unpkg.com/three@0.142.0/examples/jsm/webxr/VRButton.js'
	import { BoxLineGeometry } from 'https://unpkg.com/three@0.142.0/examples/jsm/geometries/BoxLineGeometry.js'
	import { OrbitControls } from 'https://unpkg.com/three@0.142.0/examples/jsm/controls/OrbitControls.js'
</script>