Невозможно интегрировать django_vite

Моя установка: Django 5.0.6, React 18.2.0, Vite 5.1.6, @vitejs/plugin-react 4.2.1.

У меня очень минимальная установка, пытаюсь настроить django и react вместе с помощью django_vite, но не получается. Как только я начинаю импортировать компоненты (функции компонентов) в мой main.jsx компонент.

, возникает следующая проблема

enter image description here

Ниже приведены конфигурации.

// package.json
"dependencies": {
    "vite": "^5.1.6",
    "@vitejs/plugin-react": "^4.2.1",
    "antd": "^5.17.0",
    "axios": "^1.6.8",
    "bootstrap": "^5.3.3",
    "exif-js": "^2.3.0",
    "exifr": "^7.1.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "react-toastify": "^10.0.5"
  },
  "devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.5"
  }

// settings.py 

STATIC_URL = 'static/'
STATIC_ROOT = 'staticfiles/'
STATICFILES_DIR = [
    BASE_DIR / 'dist'
]

DJANGO_VITE = {
    "default": {
        "dev_mode": DEBUG
    }
}

// vite.config.js


export default defineConfig({  
  base:'/static/',
  build:{
    emptyOutDir:true,
    manifest:'manifest.json',
    assetsDir:'',
    outDir:'./dist',
    rollupOptions:{
      input:{
        home:"./frontend/main.jsx"
      }
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './frontend'),
      '@styles': path.resolve(__dirname, './frontend/assets/styles'),
    },
  },
  plugins: [react()],
});

// home.html

{% load django_vite %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {% vite_hmr_client %}
    {% vite_asset './frontend/main.jsx' %}
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
</body>
</html>

Я также пробовал интегрировать с django_vite_plugin, который показывает ту же ошибку.

Кроме того, если я перестану импортировать функциональные компоненты и сделаю все в main.jsx, то все будет работать нормально, но это нежелательно.

Мне не хватало тега, который очень специфичен для React и также упоминается в документации по интеграции.

{% vite_react_refresh %}

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