I am new to Three.js and running on version 0.167.0 of Three.js.
I am trying to create a PlaneGeometry with ShaderMaterial but I get an error and nothing renders in the scene.
Here is my code snippet.

glsl.js

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

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

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.01,
  1000,
);
const oribit = new OrbitControls(camera, renderer.domElement);

camera.position.set(0, 0, 12);
oribit.update();

const geometry = new THREE.PlaneGeometry(10, 10, 30, 30);
const material = new THREE.ShaderMaterial({
  uniforms: {
    u_time: { type: "f", value: 0.0 },
  },
  vertexShader: `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
    `,
  fragmentShader: `
    void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0)
    }`,
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

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

renderer.setAnimationLoop(animate);

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

I have tried various different ways of importing Three.js.