Vexflow and create-react-app errors

[Martin Gladdish]

Hi

Apologies, my javascript is very poor, but I've run in to a problem that I don't understand how to get past.

I'm trying to use Vexflow with react, and started with their quick-start app template: https://github.com/facebookincubator/create-react-app

That's all fine, and I used yarn to add a dependency on the latest version of vexflow. So good so far.

But then trying to use vexflow, I get a compile error when the project builds:

×

TypeError: this.element.appendChild is not a function. (In 'this.element.appendChild(svg)', 'this.element.appendChild' is undefined)

SVGContext

node_modules/vexflow/releases/vexflow-debug.js:3607

  3604 |     this.svgNS = 'http://www.w3.org/2000/svg';
  3605 |     var svg = this.create('svg');
  3606 |     // Add it to the canvas:
> 3607 |     this.element.appendChild(svg);
  3608 | 
  3609 |     // Point to it:
  3610 |     this.svg = svg;

View compiled

There are a bunch more errors; this is just the first.

What I _suspect_ is going on is that web pack is trying to compile the vexflow js, and is missing either the required dependencies or build configuration to do so. I've tried adding vexflow's devDependencies to my own project, but with no luck.

Has anyone else done anything similar, or could suggest what I could do to work out what the problem is?

Many thanks.

[Alan McNeil]

Probably "this.element" is undefined. Take a look at "this" in a debugger just before executing the statement. You'll probably see what's wrong quickly.

[Martin Gladdish]

If it was a problem with vexflow, then vexflow would never work.

It must be something "special" that this starter project is doing to make it lose what "this" is.

[Martin Gladdish]

I found the issue.

I was calling new Vex.Flow.Factory in my react component's 'render' method. It turns out this error happens when the Factory is called when the given element isn't in the dom. So react was going to render my <div> and call the factory method all at the same time, whereas the factory method requires the element to be present within the dom at the time it is called.

Moving the call to Factory to react's componentDidMount() method was the answer. I.e. call the factory _after_ react has written our element to the document.

[Prem Anand]

Hi Martin,

I know react and I am trying to experiment with Vexflow in my react app. Since you have already tried it, it would help me if you can help me with your completed code in using vexflow in react app. Would you be able to help me and point to any respository available where i can take a look?

thanks,

Prem