ANY edit in this threejs sample build ends up with white screen - build

Question

I was given this sample build project to be able to play around with threejs since I was having trouble making the app work as a beginner. I wanted to test if I could edit the build project, so I decided to add another cube, and reposition it anywhere along the x axis. However, I noticed that I just keep getting a white screen for an unknown reason.
main.js(adding a cube)
import {
BoxBufferGeometry,
Mesh,
MeshBasicMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let camera, scene, renderer;
class App {
init() {
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new Scene();
const geometry = new BoxBufferGeometry( 200, 200, 200 );
const material = new MeshBasicMaterial();
const mesh = new Mesh( geometry, material );
scene.add(mesh);
const geometry2 = new BoxBufferGeometry(200, 200, 200);
const material2 = new MeshBasicMaterial();
const mesh2 = Mesh(geometry2, material2);
mesh2.position.y = -3;
scene.add(mesh2);
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
const controls = new OrbitControls( camera, renderer.domElement );
animate();
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
export { App }
Correct me if what I did was wrong, but I ran the following to test out the App.
npm install for the npm modules.
npm run build to update the build.js
I checked the console and the following error was shown:
I also tried just changing the material of the cube using the code below.
main.js (changing material)
import {
BoxBufferGeometry,
Mesh,
MeshLambertMaterial,
PerspectiveCamera,
Scene,
WebGLRenderer
} from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
let camera, scene, renderer;
class App {
init() {
camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new Scene();
const geometry = new BoxBufferGeometry( 200, 200, 200 );
const material = new MeshLambertMaterial();
const mesh = new Mesh( geometry, material );
scene.add(mesh);
renderer = new WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
const controls = new OrbitControls( camera, renderer.domElement );
animate();
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
export { App }
This resulted in just a black screen. I could not even access the console to check the error since nothing shows up when I right click on the screen.
Is there something wrong with how I build the project after editing?