无法集成django_vite

Question

我的设置：

Django 5.0.6, React 18.2.0, Vite 5.1.6, @vitejs/plugin-react 4.2.1.

我有一个非常小的设置，尝试设置 django 并使用

django_vite

一起做出反应，但失败了。当我开始将组件（功能组件）导入到我的

main.jsx

组件中时，立即出现以下问题。

以下是配置。

// 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

中的所有操作，它可以正常工作，但这不是我们想要的。

Answer 1

我缺少一个针对 React 的特定标签，集成文档中也提到了。

{% vite_react_refresh %}

无法集成django_vite

问题描述投票：0回答：1

1个回答

最新问题

无法集成django_vite

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1