Uncaught Error: JavaScript generator does not know how to generate code for block type "colors_block".

[Dety Vitanova]

Hi,

Last year I started a project in blockly, which I've been working on every now-and-then, when I have the time. Recently, I reopened my project, to find that my blocks no longer work like they used to, and instead I get a similar error in the console:

Uncaught Error: JavaScript generator does not know how to generate code for block type "vehicles_block".

    blockToCode https://unpkg.com/blockly/blockly.min.js:1399

    workspaceToCode https://unpkg.com/blockly/blockly.min.js:1397

    runCode file:///C:/Users/user/Desktop/Blockly project page/testCustomBlocks.html?ip=127.0.0.1&ip2=192.168.1.237&ip3=127.0.0.1:122

    onclick file:///C:/Users/user/Desktop/Blockly project page/testCustomBlocks.html?ip=127.0.0.1&ip2=192.168.1.237&ip3=127.0.0.1:1

I tested using version 10.4.3, and my blocks work as they used to. I did also get the following warning:

block generator functions on CodeGenerator objects was deprecated in 10.0 and will be deleted in 11.0.
Use the .forBlock[blockType] dictionary instead.

I know it's probably an extremely dumb question on my side. I am still quite inexperienced. But what I'm supposed to do to, for my project to work properly with the newest version?

Here are some snippets of my code:

        Blockly.Blocks['colors_block'] = {

            init: function () {

                this.appendDummyInput()

                    .appendField("Цветове")

                    .appendField(new Blockly.FieldDropdown([

                        ["ЗЕЛЕН", "colors/green"],

                        ["ОРАНЖЕВ", "colors/orange"],

                        ["ЧЕРВЕН", "colors/red"],

                        ["СИН", "colors/blue"],

                        ["РОЗОВ", "colors/pink"],

                        ["БЯЛ", "colors/white"],

                        ["ЖЪЛТ", "colors/yellow"]

                    ]), "COLOR");

                this.setPreviousStatement(true, null);

                this.setNextStatement(true, null);

                this.setColour(160);

                this.setTooltip("Изберете цвят");

                this.setHelpUrl("");

            }

        };

        Blockly.JavaScript['colors_block'] = function (block) {

            return generateFetchCode(block, 'COLOR', 'nao2');

        };

        function generateFetchCode(block, fieldName, endpoint) {

            var fieldValue = block.getFieldValue(fieldName);

            var code = `fetch('http://localhost:3000/${endpoint}?IP=' + encodeURIComponent('${ipRobotNao}') + '&BN=' + encodeURIComponent('${fieldValue}'))

                .then(response => response.json())

                .then(data => console.log('Response:', data))

                .catch((error) => { console.error('Error:', error); });`;

            return code;

        }

[Christopher Allen]

Hi Dety,

 

Last year I started a project in blockly, which I've been working on every now-and-then, when I have the time. Recently, I reopened my project, to find that my blocks no longer work like they used to, and instead I get a similar error in the console:

Uncaught Error: JavaScript generator does not know how to generate code for block type "vehicles_block".

I tested using version 10.4.3, and my blocks work as they used to. I did also get the following warning:

block generator functions on CodeGenerator objects was deprecated in 10.0 and will be deleted in 11.0.
Use the .forBlock[blockType] dictionary instead.

I know it's probably an extremely dumb question on my side. I am still quite inexperienced. But what I'm supposed to do to, for my project to work properly with the newest version?

Prior to Blockly v10, when looking for a block generator function, the blockToCode method would look up the function on itself, i.e. look for this[blockType].  This created some problems when we tried to port the language generators (e.g. javascriptGenerator formerly known as Blockly.JavasScript) and the individual block generator functions for the standard library blocks to TypeScript, because although TypeScript does allow index signatures there were various conflicts with the types of other methods defined on various generator classes and instances.

To solve this, in Blockly v10 we made a change to the way that the CodeGenerator class works: now it looks up per-block generator functions in a dictionary: this.forBlock[blockType], and—to make transition easier—will fall back to the old lookup if the new one fails, but we emit the warning you quote above to alert developers to the change.

In Blockly v11 we removed that fallback, so code that has not been updated will no longer work.

All you need to do is change where you store your generator functions.  You snippet can be updated as follows:

import {javascriptGenerator, Order} from 'blockly/javascript';

javascriptGenerator.forBlock['colors_block'] = function (block, generator) {

return generateFetchCode(block, 'COLOR', 'nao2');
};

Note that, within the body of a generator function like this you can now use the new generator parameter to make recursive calls (e.g. generator.valueToCode(/*...*/)) instead of hardcoding the generator instance (e.g. javascriptGenerator.valueToCode(/*...*/)).

Best wishes,

Christopher