Anyone have any luck getting Blockly to work with React?

[Greg Parker]

I'm not having much luck getting Blockly to work in a Node.js/React application.  I'm currently trying to use node-blockly (https://www.npmjs.com/package/node-blockly) but all attempts lead to the same error:

"uncaught exception: Error: container is not in current document."

I've seen lots of posts about the error but I haven't come across anyone with a solution.

This is what the code looks like (I've omitted lots of stuff for brevity)

import React, {Component, PropTypes} from 'react';

import ReactDOM from 'react-dom';

import Blockly from 'node-blockly';

const toolbox = `

     <xml>

       <block type="controls_if"></block>

       <block type="controls_whileUntil"></block>

     </xml>`

class Editor extends Component {

    componentDidMount() {

        Blockly.inject(this.blocklyDiv, {toolbox: toolbox});

    }

    render = () => {

        return (
            <div className="editor">
                <div id="blocklyContainer">
                    <div id="blocklyDiv" ref={(d) => {this.blocklyDiv = d}}></div>
                </div>
            </div>
        );
    }
}

export default Editor;

[ma...@thunkable.com]

Greg, 

  We've had success with this React component for Blockly: https://github.com/patientslikeme/react-blockly-component

-Mark

If you can think it, you can Thunk it.

[Eugene Formanenko]

You should use node-blockly/browser.js in a browser

import Blockly from 'node-blockly/browser';

Live demo (source)