React Flow Edges Not Displaying Correctly in Vite Production Mode with Django Integration

I am developing a Django website and encountered an issue while integrating React Flow UI into one of the apps. The frontend of the site was previously written entirely in pure HTML, CSS, and JavaScript, so I am new to React.

I needed to generate a React Flow canvas and pass it to a Django template. Using Vite to bundle the React app, I successfully implemented this, but I encountered a problem: in production mode (after building with npx vite build), the CSS behavior differs from development mode (running with npx vite dev).

In development mode, styles render correctly. However, in the production version, styles work only partially — specifically, edges between nodes (react-flow__edge-interaction) are not displayed.

Problem

In production mode, React Flow edges (react-flow__edge) are not displayed, and their CSS classes only partially work. In development mode, everything functions correctly. Video with an example of the problem: click

Project structure

Standard files/directories for Django and React apps are omitted for brevity:

<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

Content of 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 %}

Content of 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;

Content of 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 />);

Content of 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]';
        },
      },
    },
  },
});

What I have tried:

1. Verified that CSS is correctly imported in both App.jsx and reactflow_canvas.html.
2. Confirmed that React Flow styles (@xyflow/react/dist/style.css) are explicitly imported.
3. Tested different Vite configurations, including disabling minification (minifyIdentifiers: false).

Why do the react-flow__edge styles work correctly in development mode but break in production, and how can I fix this?

Back to Top