I have a file structure that looks like this:

My index.js has this code
const THREE = require("three")
var scene = new THREE.scene();
console.log(scene)
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="webgl-output">What the hell</div>
<script src="./index.js"></script>
</body>
</html>
I did not use the tag { type : "modules } in my package.json. However, I am still getting the Uncaught ReferenceError: require is not defined error. May I know what is the reason? Thanks!
Error in my live server looks like this

This is my package.json if you are interested
{
"name": "threejs-playground",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"three": "^0.133.1"
}
}