React Flow Edges не отображается корректно в режиме Vite Production с интеграцией Django

Я разрабатываю сайт на Django и столкнулся с проблемой при интеграции React Flow UI в одно из приложений. Фронтенд сайта ранее был полностью написан на чистом HTML, CSS и JavaScript, так что я новичок в React.

Мне нужно было сгенерировать канвас React Flow и передать его в шаблон Django. Используя Vite для сборки приложения React, я успешно реализовал это, но столкнулся с проблемой: в режиме производства (после сборки с помощью npx vite build) поведение CSS отличается от режима разработки (запускается с помощью npx vite dev).

В режиме разработки стили отображаются корректно. Однако в производственной версии стили работают лишь частично - в частности, не отображаются ребра между узлами (react-flow__edge-interaction).

Проблема

В режиме производства края React Flow (react-flow__edge) не отображаются, а их CSS-классы работают лишь частично. В режиме разработки все работает правильно. Видео с примером проблемы: click

Структура проекта

Стандартные файлы/каталоги для приложений Django и React опущены для краткости:

<app_name>/
├── templates/
│   └── <app_name>/
│       └── reactflow_canvas.html
├── static/
│   └── reactflow-frontend/
|       ├── dist/ (dir with build files (index.css and index.js)
│       ├── src/
│       │   ├── App.jsx
│       │   ├── App.css
│       │   ├── index.jsx
│       │   └── index.css
│       ├── index.html
│       └── vite.config.js

Содержание reactflow_canvas.html:

{% extends 'base.html' %}
{% load static %}

{% block title %} React Flow {% endblock %}

{% block links %}
<link rel="stylesheet" href="{% static 'css/salaries_config.css' %}">
<link rel="stylesheet" href="{% static 'reactflow-frontend/dist/index.css' %}">
{% endblock %}

{% block body %}
<div id="app"></div>
{% endblock %}

{% block scripts %}
<script type="module" src="{% static 'reactflow-frontend/dist/index.js' %}"></script>
{% endblock %}

Содержание App.jsx:

import { useCallback, useState } from 'react';
import {
    ReactFlow,
    addEdge,
    Controls,
    Background,
    applyEdgeChanges,
    applyNodeChanges,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';

import TextUpdaterNode from './reactflow_nodes/TextUpdaterNode';

const rfStyle = { backgroundColor: '#ffffff' };

const initialNodes = [
    { id: 'node-1', type: 'textUpdater', position: { x: 0, y: 0 }, data: { value: 123 } },
    { id: 'node-2', type: 'textUpdater', position: { x: 0, y: 100 }, data: { value: 150 } },
];
const nodeTypes = { textUpdater: TextUpdaterNode };

function Flow() {
    const [nodes, setNodes] = useState(initialNodes);
    const [edges, setEdges] = useState([]);
    
    const onNodesChange = useCallback((changes) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
    const onEdgesChange = useCallback((changes) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
    const onConnect = useCallback((connection) => setEdges((eds) => addEdge(connection, eds)), []);
    
    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            <ReactFlow
                nodes={nodes}
                edges={edges}
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
                onConnect={onConnect}
                nodeTypes={nodeTypes}
                fitView
                style={rfStyle}
            >
                <Controls position="top-right" />
                <Background variant="dots" gap={12} size={1} />
            </ReactFlow>
        </div>
    );
}

export default Flow;

Содержание index.jsx:

import { createRoot } from 'react-dom/client';
import App from './App';

import './index.css';

const container = document.querySelector('#app');
const root = createRoot(container);

root.render(<App />);

Содержание vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'index.js',
        chunkFileNames: 'index.js',
        assetFileNames: ({ name }) => {
          if (name && name.endsWith('.css')) {
            return 'index.css';
          }
          return '[name][extname]';
        },
      },
    },
  },
});

То, что я пробовал:

1. Убедитесь, что CSS правильно импортируется в App.jsx и reactflow_canvas.html.
2. Убедитесь, что стили React Flow (@xyflow/react/dist/style.css) импортируются явно.
3. Протестированы различные конфигурации Vite, включая отключение минификации (minifyIdentifiers: false).

Почему стили react-flow__edge корректно работают в режиме разработки, но ломаются в режиме производства, и как это можно исправить?

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