Threejs cube is black and has no unexpected light

I see other people demo has light but my local 5173 cannot see the light on some sides for the MeshPhongMaterial. I tested light position , tested pointlight , tested ambientlight and still cannot find the reason. I checked the code of other people demo, people usually use let in the website online for the demo instead of const but I think it does not matter. I cannot find the reason why the cube is always black and single color without light effect when rotating.

import './style.css'
import * as THREE from 'three';
import WebGL from 'three/addons/capabilities/WebGL.js';

// Initialize Three.js
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 1.0) 
renderer.shadowMap.enabled = true 


document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(10, 10, 10); 
camera.lookAt(scene.position); 



// Add an ambient light to provide overall illumination
const ambientLight = new THREE.AmbientLight(0x404040, 1, 1000)
ambientLight.position.set(10, 10, -10)
scene.add(ambientLight)

const pointLight = new THREE.PointLight(0xffffff, 1,1000)
pointLight.position.set(5, 5, 5)
scene.add(pointLight)
     
const geometry = new THREE.BoxGeometry(1, 1, 1) 
const material = new THREE.MeshPhongMaterial({
    color: 0x0000ff
  })
const cube = new THREE.Mesh(geometry, material) 
cube.position.set(0, 1 , 0)
scene.add(cube)

const wireframeCube = new THREE.Mesh(
    new THREE.BoxGeometry(2, 2, 2),
    new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true })
);
scene.add(wireframeCube);

function animate() {
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
  }

function render() {
    animate()
    requestAnimationFrame(render)
    renderer.render(scene, camera)
}

// Render the scene
renderer.render(scene, camera);

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  })


if ( WebGL.isWebGL2Available() ) {

    // Initiate function or other initializations here
    render()

} else {
    const warning = WebGL.getWebGL2ErrorMessage();
    document.getElementById( 'container' ).appendChild( warning );
  console.log('Not Support webgl');

}

[![a cube with no light][1]][1]
[1]: https://i.sstatic.net/65p8brtB.png