xyflow: Nodes and edges not rendering properly after vite build
Describe the Bug
Hello!
I have a reactflow which works correctly locally but when I deploy to a dev environment (i.e. once built) the edges and nodes are not displayed correctly… I tried several things like statically setting the height and width of the parent, to see if it came from the ELK algorithm but still nothing…
Your Example Website or App
No response
Steps to Reproduce the Bug or Issue
Here its the package I used:
"reactflow": "^11.10.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"vite": "^4.2.1",
Maybe that have a link with vite build ?
Here it’s my code:
<ReactFlowProvider>
<Box style={{ height: 620, width: '100%' }}>
{initFitViewOptions && (
<ReactFlow
nodes={nodes}
edges={edges}
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
minZoom={-15}
maxZoom={15}
fitViewOptions={initFitViewOptions}
fitView
onNodeDragStop={(_, newNode) => onNodeDragStop(newNode)}
onNodeClick={(_, node) => handleClickOnNode?.(node)}
>
<Controls showFitView />
</ReactFlow>
)}
{!editorView && positionHaveChanged && (
<HStack>
<HStack>
<Text color="greysecondary" mr="10px">
You changed the positions. It won’t be visible by the other users.
</Text>
<Button
variant="secondary"
onClick={() => {
handlePositionChanged?.(false);
onLayout?.({ useInitialNodes: true });
}}
>
Reset
</Button>
</HStack>
</HStack>
)}
</Box>
<ReactFlowProvider>
Expected behavior
I want that works after a build
Screenshots or Videos
In local:
After a build:
Width of nodes are not correct, edges doesn’t appear, handler are positioned weirdly
Platform
- OS: macOS
- Browser: Chrome
- Version: 111.0.5
Additional context
Tell my if you want more informations Thank in advance for help !
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Comments: 19 (9 by maintainers)
You are right, it came from the vite config thank you very much for the help!