Blockly: Can't require blockly directly

[paulsonnentag]

I want to use budo to develop a blockly application. Therefore I need to require blockly directly. In order to export Blockly and goog as global variables I've modified the "blockly_compressed.js" file and added these two lines at the end of the file

window.Blockly = Blockly;
window.goog = goog;

My index.js looks like this

require('./blockly_compressed');
require('./blocks_compressed');
require('./javascript_compressed');
require('./msg/js/en');

document.body.innerHTML = `
<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_repeat_ext"></block>
  <block type="logic_compare"></block>
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="text"></block>
  <block type="text_print"></block>
</xml>
`;


var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox')});

When I run the application with _budo index.js_ I get the following exception:

blockly_compressed.js:1437 
Uncaught Error: container is not in current document.
Blockly.inject                     @    blockly_compressed.js:1437
5../blockly_compressed    @ test.js [sm]:33
s                                         @ _prelude.js:1
e                                      @    _prelude.js:1
(anonymous function)       @    _prelude.js:1

Can anyone give my a hint what I'm doing wrong? Thanks :)

[rachel-fenichel]

Discussing in https://groups.google.com/forum/#!topic/blockly/YMveG2iUv3w

Questions about problems getting started are best sent to the developers group.

[green-coder]

I have the same problem, and I didn't find a solution here or in the google group. Maybe the issue should be reopened ?

[RoboErikG]

Hi green-coder,

What Rachel means is you should try e-mailing the list. There are a lot more people with experience in different setups on the mailing list who can help debug specific problems. We try to keep the issue tracker just for feature requests and bugs.

[green-coder]

For info, someone has solved this problem by creating a CommonJS-friendly npm package for Blockly. I think that a lot of modern framework users will want to use it instead.

It would be nice however if the original project could directly be Common-JS compatible. Please consider this present issue as a Feature Request.

UPDATE: Link to #887

[rachel-fenichel]

Hi green-coder,

We're aware that this is a pain point for some of our developers, and it's definitely on our to-do list.

[chuckhacker]

Sorry, any updates?

[rachel-fenichel]

Nothing new to report.

[custer-go]

I use the react.js and node-blackly
but I meet this mistake,
I need help to fix my code , thank you

import React from 'react'
import Blockly from 'node-blockly'
const toolbox = `
         <xml>
           <block type="controls_if"></block>
           <block type="controls_whileUntil"></block>
         </xml>` 
class BlocklyDiv extends React.Component {
    componentDidMount() {
        var workspace = Blockly.inject(this.blocklyDiv,{toolbox: toolbox});
    }
    render() {
        return (
            <div>
                <h2>BlocklyDiv</h2>
                <div id="blocklyContainer">
                    <div id="blocklyDiv" ref={ref => this.blocklyDiv = ref} ></div>
                </div>
            </div>
        )
    }
}
export default BlocklyDiv

[Maslow]

Sorry, any updates?

[rachel-fenichel]

Nothing new at this time.