React Vite: npm run dev и npm run preview работают, но сборка показывает TypeError на платформе Render

У меня есть проект Django REST Framework (backend) + Postgresql + Vite React (frontend), который отлично работает в локальном режиме, когда я запускаю команду npm run dev.

Вот мой файл package.json:

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "engines" : { 
    "node" : ">=21.6.2 <22.0.0"
  },
  "dependencies": {
    "@ant-design/icons": "^5.5.1",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/material": "^6.1.0",
    "@reduxjs/toolkit": "^2.2.7",
    "axios": "^1.7.7",
    "dotenv": "^16.4.7",
    "leaflet": "^1.9.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-leaflet": "^4.2.1",
    "react-paginate": "^8.2.0",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.26.1",
    "react-router-redux": "^4.0.8",
    "react-social-icons": "^6.18.0",
    "redux": "^5.0.1",
    "styled-components": "^6.1.13"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/leaflet": "^1.9.16",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "vite": "^5.4.14"
  }
}

Мой файл vite.config.js ниже:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import dotenv from 'dotenv'

dotenv.config()


// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd());

    const isDevelopment = mode === 'development'
    const baseURL = isDevelopment ? env.VITE_API_BASE_URL_LOCAL : env.VITE_API_BASE_URL_DEPLOY

    console.log("baseURL")
    console.log(baseURL) 

    
    return {

        plugins: [react()],
        server: {
            proxy: {
                '/api': {
                    target: baseURL,
                    changeOrigin: true,
                },
            },
        },
    }
})

Я развернул Django на платформе Render, которая работает нормально.

Однако, если собрать React Vite (фронтенд) для производства с помощью npm install && npm run build на платформе Render, страница ничего не загружает, а только показывает белый экран, и я получаю JS TypeError, как показано на скриншоте ниже:

TypeError в console.log

На другом снимке экрана показана ошибка типа TypeError в индексном файле:

TypeError in html

Я просто играю вокруг, чтобы попытаться найти решение. Я запускаю npm run build во фронтенде в локальном режиме, а затем запускаю npm run preview. React Vite успешно подключается к бэкенду Django, который развернут на Render Platform, и все работает нормально. Смотрите скриншоты ниже:

превью в коде VS

По какой-то причине Render не собирает исходный код, так как он собирается на моей локальной машине.

Вернуться на верх