Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”

Question

I was making a water using three.js and got this error:

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.

The HTML code I used to create the water is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
                <script type="importmap">
        {
            "imports": {
                "three": "./build/three.module.js",
                "three.js-master/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js",
                "three.js-master/examples/jsm/libs/stats.module":"./jsm/libs/stats.module.js",
            }
        }
    </script>
    </head>
    <body>
        
        <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
        <script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script> 
        
        
        </script>
        <script  type="module">

            import { Water } from 'http://localhost/Lines/jsm/objects/Water.js';
            import * as THREE from 'http://localhost/Lines/build/three.module.js';

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );
            

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

        

            const WaterGeometry = new THREE.PlaneGeometry( 45, 45 );
            const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/mK9cHLq.jpeg' );
            const material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );       
            const controls = new THREE.OrbitControls( camera, renderer.domElement );

            let water = new Water
                (
                    WaterGeometry,
                    {
                        textureWidth: 512,
                        textureHeight: 512,
                        waterNormals: new THREE.TextureLoader().load
                        ( 'textures/waternormals.jpg', function ( texture ) 
                        
                            {

                             texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

                            } 
                        ),
                        sunDirection: new THREE.Vector3(),
                        sunColor: 0xffffff,
                        waterColor: 0x001e0f,
                        distortionScale: 3.7,
                        fog: scene.fog !== undefined
                    }
                );



            controls.update();

            scene.add( water );



            function animate() 
            {
                requestAnimationFrame( animate );

                water.rotation.x += 0.00;
                water.rotation.y += 0.00;
                water.rotation.z += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

Pretty sure the javascript code Water.js imported within my folder has no problems and my HTML code is the problem.

Why is my code throwing that kind of error. Please enlighten me.

Does this answer your question? Failed to resolve module specifier three — M -
– M -, Commented Aug 16, 2022 at 3:15
@Marquizzo I tried to understand and copy some parts of the code on your link but I still get the same error. I'm really getting frustrated by now because I don't know why my code throws that error. It's been a week since I encountered this and I'm getting frustrated day by day seeing my code. I thought three.js was cool, but it seems she's very hard to use....especially importing something. Damn it, why am I not smart for this..Curse this. I don't even know how to write the HTML code in such a way that won't throw that error. I wrote the code in the answer with the hint you said in the link. — Cambria
– Cambria, Commented Aug 16, 2022 at 9:44
This isn't directly related to your question, but it could help you to start auto-formatting your code. I recommend finding the "prettier" extension and finding a "format on save" setting, or just formatting your code periodically. It will help you to navigate your code and know where things are, which in turn will help you to understand error messages. I really sympathize with your frustration, I think you have the perseverance to be good at this though! Take the time to understand what the error message is saying (looks like it sees "three" but expects something else) - the rest will come. — Sasha Kondrashov
– Sasha Kondrashov, Commented Aug 28, 2022 at 23:10

dolap · Accepted Answer · 2022-08-17 09:44:36Z

1

I've had the same issue, and it's got nothing to do with HTML. To me the issue occured when I uploaded script on the webserver. I just had to change import paths (adding ../../ where needed to). I hope this helps you.

answered Aug 17, 2022 at 9:44

dolap

335 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

lovelance1 · Accepted Answer · 2022-08-19 01:32:54Z

1

This error appeared when I ran the html file with Firefox. When I used Chrome, it worked perfectly. The issue seems to be that Firefox does not support importmaps yet and this is a known bug from their side.

answered Aug 19, 2022 at 1:32

lovelance1

711 silver badge3 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related