Issue with React build

Hi Mo:

I was able to use your lib locally for my React app (built using Create React App).

However, when I build it for production, I’m seeing this error.

I did a lot of research and tried a bunch of things but couldn’t figure out what’s wrong.

I’m hoping you can give me some guidance.

Repro steps:

1. Clone this branch: https://github.com/jdaudier/unfretgettable/tree/vexchords
2. Run yarn build
3. Serve the build

yarn global add serve
serve -s build

1. Try using the app
2. You should see this error

[0xfe]

My hypothesis:

React uses a Virtual DOM, which is a shadow in-memory structure that represents the DOM. This is ostensibly faster than manipulating the DOM directly, and is enabled only for production builds.

When render() is called on a component, it’s only the virtual DOM that is updated – since this is fast, this can happen frequently. Shortly after, the actual DOM is updated with only the diffs between the last snapshot of the virtual DOM.

So here, the SVG library used in in vexchords (svgjs) looks for actual DOM elements upon initialization, and for some reason, cares that they’re real. This fails, and you see the error.

Two options that I can think of: 1) use react-friendly svg library, or 2) replace the library calls with injecting raw svg elements (there aren’t a lot.)

[0xfe]

Hi Joanne – I spent some time digging into this and it looks like React really takes over the entire DOM, making it tricky to do the type of dynamic manipulation that we do here. I’m looking into https://github.com/tanem/svg-injector to see if it’ll help.