Error: 'document.getElementById is not a function' when using Angular2 + Webpack

[FunkeyFlo]

I'm trying to use this library to load blockly synchronously. But when I try to require the module I get 'document.getElementById' errors during runtime and the app completely breaks. Anyone who has experience with this? Am I doing something horribly wrong?

[mo4islona]

Are you use it in browser? This repo is for Node.js. You should load Blockly globally in your app I mean original Blockly https://github.com/google/blockly/

[FunkeyFlo]

Yeah, that is the end-goal. Currently I'm hosting it on a node development server but I hoped this would provide me with the means to load it asynchronously. I'm loading it globally through script tags at the moment and that works, but it isn't a pretty solution.

[mo4islona]

This library rewrite global document with fake methods. Of course, it will break all js code in a browser on that page. Original Blockly is not designed to be loaded as AMD/CommonJS module.

Actually I can try to build CommonJS version for the browser env

[FunkeyFlo]

If you would be able to do so I think it would add a lot of value to this library!

[mo4islona]

I've built a CommonJS version for browser.

Check out test/browser dir

Install

• npm i
• webpack

Then open index.html

Blockly is not in a global scope and document.getElementById works.

Please check this version in your project.

[FunkeyFlo]

That fixed it, thank you so much!

I now import the custom blocks I make through a require('path/block_name.js'); syntax and that works as well. I'll test generators too and let you know how that turns out!

[FunkeyFlo]

I got custom code generation working as well by just requiring the blockly module inside the custom generator main file.

'use strict';

// goog.provide('Blockly.TypeScript');

// goog.require('Blockly.Generator');

var Blockly = require('node-blockly/browser');

/**
 * TypeScript code generator.
 * @type {!Blockly.Generator}
 */
Blockly.TypeScript = new Blockly.Generator('TypeScript');

[mo4islona]

Glad to hear it!