Search code examples
reactjsdjangovite

Unable to integrate django_vite

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

I have a very minimal setup, trying to to setup django and react together using django_vite but failing to do so. Getting the following issue as soon as I start importing components(function components) into my main.jsx component.

enter image description here

Below are the configs.

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

I have tried integrating with django_vite_plugin as well which shows the same error.

Also if I stop importing functional components and do everything in the main.jsx that it works fine but that's not desired.

Solution

  • I was missing a tag that is very specific for React and is also mentioned in the integration docs.

    {% vite_react_refresh %}