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.
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.
I was missing a tag that is very specific for React and is also mentioned in the integration docs.
{% vite_react_refresh %}