I need help on why my three.js code isn't working

I want to learn three.js and tried following the getting started code on the three.js documentation, but the scene isn't rendering, and I am completely stumped.

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <h1>My first three.js app</h1>
        <style>
            body { 
                margin: 0; 
            }
        </style>
        <script type="importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@<v0.167.1>/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@<v0.167.1>/examples/jsm/"
              }
            }
          </script>
    </head>
    <body>
        <script  type="module" src="/main.js"></script>
    </body>
</html>

main.js:

import * as THREE from 'three';

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

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

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

I have no idea what is wrong, but the only thing showing up is the header. Please help!

Solution

You have syntax error how you importing maps. This is not how we mark the library version. We do not wrap the number of version (it may be a bit confusing as they presented it in the documentation...) in angle brackets <>. Like this will be fine: v0.167.1 or 0.167.1 but not like this: <v0.167.1>.

<script type="importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@v0.167.1/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.167.1/examples/jsm/"
              }
            }
</script>

Try this approach:

<script type="importmap">
            {
              "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@v0.167.1/build/three.module.js",
                "three/addons/": "https://cdn.jsdelivr.net/npm/three@v0.167.1/examples/jsm/"
              }
            }
    </script>
    </head>
    <body>
        <script  type="module">
import * as THREE from 'three';

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

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

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

</script>