Uncaught ReferenceError: require is not defined at index-a136b960.js:3888:2474

Question

when i'm hosting my site it's not showing any content and given the error

"Uncaught ReferenceError: require is not defined at index-a136b960.js:3888:2474"

but this file are not available in my root folder or project, and when i'm run in this site localhos it's running as expected and not showing any error.

below this my json file in this project.

enter image description here

enter image description here

Live site link: https://nasa-space-apps-challenge-2023.vercel.app/

{
  "name": "first-3d-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@canvasjs/react-charts": "^1.0.0",
    "@heroicons/react": "^2.0.18",
    "@material-tailwind/react": "^2.1.2",
    "@react-three/drei": "^9.85.2",
    "@react-three/fiber": "^8.14.4",
    "@tanstack/react-query": "^4.35.7",
    "axios": "^1.5.1",
    "leaflet": "^1.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-leaflet": "^4.2.1",
    "react-router-dom": "^6.16.0",
    "react-three-fiber": "^6.0.13",
    "three": "^0.156.1",
    "vite-plugin-require": "^1.1.11",
    "zustand": "^4.4.2"
  },
  "devDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.16",
    "eslint": "^8.45.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.3",
    "vite": "^4.4.5"
  }
}

how can i solve this

Answer 1

As per details provided by you, i think you are not using any server to host the frontend build. Try to add a basic express server and serve your build content on it.