updateXarrow-hook does not fire in production build

[cjesper]

Describe the bug & Expected behavior First of all, thanks for a great library. When i use react-xarrows in my app it works perfectly locally, but if it's run with npm run build/serve it suddenly stops working. Background: I am creating an app where users can drag and drop various components. I use xarrows to draw connections between elements. I am using react-draggable for the drag and drop functionality. To achieve this behaviour, i am using the onDrag-property of the react-draggable.

To Reproduce:

My components look like this:

`    <Draggable grid={[25, 25]}  position={{x: x, y: y}} onDrag={updateXarrow} >
          <div
              <.... some internal stuff here ....>
          </div>
     </Draggable>`

And then

`  const updateXarrow = useXarrow();
`

In the parent component:

`   <div style={{ position: "absolute" }}>
            <Xwrapper>
              {this.state.components}
              {this.state.connectors}
            </Xwrapper>
          </div>
`

Components are the Draggable components. Connectors are the xarrow-connectors. They have the form

`  
   <Connector key={c.key} keyName={c.key} start={c.start} end={c.end}
 `

And then the Connector-component (some fluff-code like labels etc left out for brevity:

`render() {
    return (
      <div >
        <Xarrow
                animateDrawing={true}
                start={this.props.start} end={this.props.destination}/>
      </div>`

More background info: Because i want the views to be persistent i save the coordinates of the elements in a database. I also save the start- and end positions for the connectors (xarrows) Then, when the view is rendered (on mount) i fetch the coordinates and populate the view with the components:

`populateComponents = () => {
      let components = this.state.componentPositions.map((c) =>
      <DraggableFunctionComponent id={c.componentName} key={c.componentName}
                                  x={c.x} y={c.y}
      />
      this.setState({ components: components })

          //In render
    <div style={{ position: "absolute" }}>
          {this.state.components}
          {this.state.connectors}
    </div>`

And the connectors:

  populateConnectors = () =>  {
    let connectors = this.state.connectorPositions.map((c) =>
      <Connector key={c.key} start={c.start} destination={c.destination}
    );
    this.setState({ connectors: connectors })
  };

Screenshots I recorded a short screen capture of the issue. The first part displays how the app works in local development (npm start), and then i switch over to using a locally built version (npm run build) where the arrows no longer update their position. https://streamable.com/kdj3w5

[Eliav2]

Very strange, what you used for production build? Create react app?

[cjesper]

Yes, create-react-app and then npm run build. I've tested with yarn build as well, same issue.

[cjesper]

Update: I upgraded all of my libraries (most importantly react from 16 to 17) and that fixed the strange issue.

[Eliav2]

interesting. let me know if you realize more