How to get three.js project to work on browser when using parcel deployed with vercel?

Question

I used Parcel as my web bundler and three.js and pushed this project to github and deployed it with Vercel. It runs perfectly fine with no errors on my local host (parcel index.html ->http://localhost:1234).

However, it does NOT run on vercel. It says this in the console:

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

These are the lines it is refering to (Experience:1):

import * as THREE from "three"; //this line 
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

I tried adding "/" or "./" or "../" but this just breaks my application and it no longer runs on my localhost.

Here's my package.json

{
  "name": "audio-visualizer-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gsap": "^3.8.0",
    "lil-gui": "^0.14.0",
    "regenerator-runtime": "^0.13.9",
    "three": "^0.135.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.16.4",
    "glslify-bundle": "^5.1.1",
    "glslify-deps": "^1.3.2",
    "parcel-plugin-static-files-copy": "^2.6.0"
  }
}

Here's are my directories: