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: Capture d’écran 2024-02-07 à 14 18 51

After a build: Capture d’écran 2024-02-07 à 14 19 29

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)

Most upvoted comments

You are right, it came from the vite config thank you very much for the help!