Blockly.javascript is undefined

918 views
Skip to first unread message

frm...@gmail.com

unread,
Aug 22, 2022, 1:43:34 PM8/22/22
to Blockly
In a react based blockly app am able to add blocks dynamically using:
Blockly.JavaScript['some_block_type'] = function () {....

Problem arises when testing such, in which Blockly seems to be present yet while testing the Blockly object exists yet Blockly.javascript is undefined. (See bellow.)

Any obvious suggestion?

_______________________________

// @ts-ignore
console.log("Blockly.Blocks", Blockly.Blocks);
// @ts-ignore
console.log("Blockly.JavaScript", Blockly.JavaScript);

Yields:
    console.log
      Blockly.Blocks [Object: null prototype] {
        data_array_implementation: { init: [Function: init] },
        tiny_object: { init: [Function: init] },
        string_block: { init: [Function: init] }
      }

      at Object.<anonymous> (src/Blockly/BlocklyLogic/generateContentFromXML.test.ts:114:13)

    console.log
      Blockly.JavaScript undefined

Neil Fraser

unread,
Aug 23, 2022, 4:30:42 AM8/23/22
to blo...@googlegroups.com
Don't forget to import the JavaScript generator:
<script src="javascript_compressed.js"></script>


--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/4f222879-6b8b-4af5-8407-c729d6933c97n%40googlegroups.com.


--

Oded Fuhrmann

unread,
Aug 25, 2022, 7:19:14 PM8/25/22
to blo...@googlegroups.com
Thanks Neil.

The context that I am running is a node application based on a Blockly React Component by Sam El-Husseini, which I believe was the recommended react component 2 years ago.

(I am not able to find it again in his git repo https://github.com/samelhusseini?tab=repositories.)

Pretty confused regarding what is going on.

Inside the code base I can not find an explicit reference to javascript_compressed, 
While running my code (yarn run).

// @ts-ignore
console.log("Blockly.JavaScript", Blockly.JavaScript);

yields:
Blockly.JavaScript undefined

yet doing the same thing within a file samelhusseini has created (generator.js)
console.log("MMM Blockly.JavaScript", Blockly.JavaScript);
yields:
Blockly.JavaScript Blockly.Generator {name_: 'JavaScript', FUNCTION_NAME_PLACEHOLDER_REGEXP_: /{leCUI8hutHZI4480Dc}/g, RESERVED_WORDS_: 'break,case,catch,class,const,continue,debugger,
....

Wondering how to get this functionality while testing / outside the generator file.

(adding the following:
<script src="javascript_compressed.js"></script>
did not do the job :))


 

Maribeth Bottorff

unread,
Aug 29, 2022, 4:53:51 PM8/29/22
to Blockly
Hi,

I think we need more information about how you're importing Blockly before we can help. Can you paste code where you import Blockly? Since you said it's a node application I'll assume you are using some flavor of import or require statements. The JavaScript generator should be included automatically if you import `blockly` but *not* if you import `blockly/core`. In the latter case you'll need to also import the generator from `blockly/javascript`.

Perhaps this is the example code you're using? https://github.com/google/blockly-samples/tree/master/examples/blockly-react In this code you'll notice in generator.js it imports the generator separately as I've described above.

There is also the blockly-react project which might be useful to you: https://github.com/nbudin/react-blockly

Hope that helps,
Maribeth

Mark Friedman

unread,
Aug 29, 2022, 7:58:08 PM8/29/22
to blo...@googlegroups.com
Oded, 

  I think that Sam's React component was a fork of the code from the react-blockly NPM package.  Sam's component is somewhat old (by almost 3 years) at this point, though, so I would suggest switching to the react-blockly NPM package.  That might solve your issues.  Note, though, that the config and API of the react-blockly component has changed a bit since Sam's fork, so take a close look at the usage instructions at react-blockly.

-Mark


Oded Fuhrmann

unread,
Aug 29, 2022, 9:39:33 PM8/29/22
to blo...@googlegroups.com
Thanks Maribeth!

Indeed,  https://github.com/google/blockly-samples/tree/master/examples/blockly-react  is a newer version of the one I am using.  (Used a class based BlocklyComponent rather than the newer functional component.)
In generator.js the imports are exactly as you described, with 2 import statements.

Both generator.js and my_test.test.ts start with the same content, but the execution is triggered differently (yarn start vs yarn test)

Only the my_test.test.ts logs undefined :(.
import * as Blockly from "blockly/core";
import 'blockly/javascript';
// @ts-ignore
console.log("Blockly.Blocks", Blockly.Blocks);
// @ts-ignore
console.log("Blockly.JavaScript", Blockly.JavaScript);

Oded Fuhrmann

unread,
Aug 29, 2022, 9:41:01 PM8/29/22
to blo...@googlegroups.com
Thanks Mark!

Even though this is probably the right thing to do, \will do so, as a last resort...
Cheers,

Oded.

Mark Friedman

unread,
Aug 30, 2022, 1:07:42 AM8/30/22
to blo...@googlegroups.com
My bad.  I saw a fork of the react-blockly repo in Sam's repo list and wrongly assumed that that was what you were using.  Sorry about that.  

-Mark

Maribeth Bottorff

unread,
Aug 30, 2022, 2:13:29 PM8/30/22
to Blockly
Hmm, what command is `yarn test` actually running? Is it possible that script is somehow not compiling your code or is trimming this dependency? Also, what version of Blockly are you using?

The other thing you can try is `import * as JsGenerator from 'blockly/javascript'` and then reference it as `JsGenerator` in your code instead of `Blockly.JavaScript`. (And that `JsGenerator` name is up to you, so call it whatever you like)

Maribeth
Reply all
Reply to author
Forward
0 new messages