Ошибка при использовании django-vite-plugin и react
Я использую django-vite-plugin и react для фронтенда моего проекта. Я следовал учебнику и при тестировании с использованием index.js получил ошибку
[vite] Внутренняя ошибка сервера: Не удалось разобрать источник для анализа импорта, поскольку содержимое содержит недопустимый JS синтаксис. Если вы используете JSX, обязательно назовите файл с расширением .jsx или .tsx.
Сначала я попробовал это и получил ошибку
import { createRoot } from 'react-dom/client';
document.body.innerHTML = '<div id="app">JS working</div>';
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello</h1>);
Однако когда я закомментировал последнюю строку, все заработало. Вот так:
import { createRoot } from 'react-dom/client';
document.body.innerHTML = '<div id="app">JS working</div>';
const root = createRoot(document.getElementById('app'));
//root.render(<h1>Hello</h1>);
Мой index.html
{% load vite %}
<!DOCTYPE html>
<html lang="en">
<head>
<!--Other elements-->
<!--Vite dev client for hmr (will not be displayed on production)-->
{% vite %}
{% vite 'newspaper/css/styles.css' 'newspaper/js/main.js' %}
</head>
<body>
<!--Page content-->
</body>
</html>
vite.config.js
//vite.config.js
import { defineConfig } from 'vite'
import { djangoVitePlugin } from 'django-vite-plugin'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
djangoVitePlugin([
'newspaper/js/app.js',
'newspaper/css/style.css',
]),
react()
],
});
package.json
{
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"django-vite-plugin": "file:../../vite",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"vite": "^5.3.1"
}
}
settings.py