question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Edge svg <g> elements not being rendered to the dom

See original GitHub issue

Describe the Bug

“react-flow-renderer”: “10.3.17”

Hello

For some reason the edges <g> elements are not being interested into the DOM after the application is bundled. Everything works fine in local development running in create react app which uses webpack under the hood.

Also I am not able to create new edges, the drag from the source handle does not create edges.

I tried with custom edges as well but the components for the custom edge do not render after bundling. I tried with a debugger statment in the CustomEdge component

The application is bundled with rollup for production. I have also tried with vitejs but it has the same issue. I am suspecting it has something to do with the bundler since that is the only main difference between the two. There are no errors or warnings in the console.

Any other ideas? Is there something about the edges code that will be an issue with rollup bundling?

See below videos

The example in the video is taken from https://codesandbox.io/s/coq0t9?file=/App.js&from-sandpack=true

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

n/a happens only internally

Expected behavior

As a user I expect edges to be displayed

Screenshots or Videos

Screen Shot 2022-09-16 at 1 26 14 PM

in local env with create react app OK

https://user-images.githubusercontent.com/52473897/190700409-147bab0e-8c20-4db6-9c5a-cef536dabe4f.mov

with edges issue after being bundled NOT OK

https://user-images.githubusercontent.com/52473897/190700636-dc7f9838-a12f-4df2-a32c-7c7f04f3a2ac.mov

Platform

all

Additional context

No response

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:14 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
enoguchi-lmicommented, Sep 20, 2022

@enoguchi-lmi do you have anything I could look at? A repo or a deployed app?

I will let you know if I can replicate it in a repo I can share. This is happening in an internal app but only once its deployed, locally it’s working.

1reaction
vorancommented, Sep 18, 2022

FWIW this bug also happens with versions 10.3.16 and 10.3.9. I did a binary search on versions and the first working version I found was 10.2.3. So it is quite likely that 10.3.0 introduces this bug based on the amount of changed code.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Microsoft Edge does not render SVG style elements on ajax ...
Everything is fine and all the content of the SVG file is being parsed and added to the DOM using jquery and all...
Read more >
Here's How I Solved a Weird Bug Using Tried and True ...
A <filter> element is never rendered directly; its only usage is as something that can be referenced using the filter attribute in SVG....
Read more >
<g> - SVG: Scalable Vector Graphics - MDN Web Docs - Mozilla
The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its...
Read more >
Which SVG technique performs best for way too many icons?
An inline SVG is just an HTML svg element with its contents (paths, etc.) included directly within. There's no fancy bundling or sprite...
Read more >
HTML Standard
These efforts then petered out, with some DOM Level 3 specifications published in 2004 but the working group being closed before all the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found