Creating custom commands issue

CMan

unread,

May 9, 2025, 11:40:51 AMMay 9

to Blockly

Hi! I'm new to Blockly, but I've read all relevant documentation in my frantic search to find the solution. I'm using the add_text block example from sample app and I'm getting the browser error: Uncaught TypeError: Invalid block definition for type: add_text

/**
 * @license
 * Copyright 2023 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import * as Blockly from 'blockly/core';

// Create a custom block called 'add_text' that adds
// text to the output div on the sample app.
// This is just an example and you should replace this with your
// own custom blocks.
const addText = {
  type: 'add_text',
  message0: 'Add text %1',
  args0: [
    {
      type: 'input_value',
      name: 'TEXT',
      check: 'String',
    },
  ],
  previousStatement: null,
  nextStatement: null,
  colour: 160,
  tooltip: '',
  helpUrl: '',
};

// Create the block definitions for the JSON-only blocks.
// This does not register their definitions with Blockly.
// This file has no side effects!
export const blocks = Blockly.common.createBlockDefinitionsFromJsonArray([
  addText,

]); Here is my index.html:

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Blockly Demo: Toolbox</title>

    <script src="./node_modules/blockly/blockly_compressed.js"></script>

    <script src="./node_modules/blockly/blocks_compressed.js"></script>

    <script src="./node_modules/blockly/msg/en.js"></script>

    <style>

      body {

        background-color: #fff;

        font-family: sans-serif;

}

      h1 {

        font-weight: normal;

        font-size: 140%;

}

    </style>

  </head>

  <body>

    <p>This is a demo of the SnapBot Editor</p>

    <div id="blocklyDiv" style="height: 600px"></div>

    <script type="module">

      import { toolbox } from './src/toolbox.js';

      import { theme } from './src/darktheme.js';

      var demoWorkspace = Blockly.inject('blocklyDiv', {

        move:{

        scrollbars: {

          horizontal: true,

          vertical: true

},

        drag: true,

        wheel: true},

        grid:

         {spacing: 50,

          length: 5,

          colour: '#ccc',

          snap: true},

        media: './node_modules/blockly/media/',

        theme: theme,

        toolbox: toolbox,

        zoom:

         {controls: true,

          wheel: true,

          startScale: 1.0,

          maxScale: 3,

          minScale: 0.3,

          scaleSpeed: 1.2,

          pinch: true},

});

    </script>

  </body>

</html>```
The error throws when I click into the math menu (which is where I put add text while testing) in the toolbar.

{

                kind: 'block',

                type: 'add_text',

},

Yes, my paths are correct, that's how I have it set up, I know it's weird but that's not the issue. Any and all help appreciated. Thanks in advance.

Ronald Bourret

unread,

May 9, 2025, 11:53:15 AMMay 9

to blo...@googlegroups.com

Welcome to Blockly!

createBlockDefinitionsFromJsonArray creates a block definition. When you use it, you then need to call defineBlocks to add that definition to Blockly.Blocks. See https://developers.google.com/blockly/guides/create-custom-blocks/define/json-and-js#createblockdefinitionsfromjsonarray_and_defineblocks.

Ronald Bourret

Technical Writer (Provided by Synergis)

rbou...@xwf.google.com

--
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 visit https://groups.google.com/d/msgid/blockly/c7272ceb-8624-4699-ab6c-a90252c6008en%40googlegroups.com.

Maribeth Moffatt

unread,

May 9, 2025, 8:08:34 PMMay 9

to Blockly

The sample app calls this function here, in case you were wondering.

Best,

Maribeth

CMan

unread,

May 12, 2025, 11:32:20 AMMay 12

to Blockly

Hi! Thanks for the help. The block was being defined in my index.js script but I didn't mention this in my original post, sorry about that! To make sure, I added Blockly.common.defineBlocks(blocks); to my text.js script and I'm still running into the same error, could it be something else?

Maribeth Moffatt

unread,

May 13, 2025, 5:49:35 PMMay 13

to Blockly

Can you log the value of `Blockly.Blocks` both immediately after you register the block definition and sometime on your page after you've injected the workspace?

Generally you shouldn't be using `import * as Blockly from 'blockly'` in one file and then loading Blockly from a script tag in another. It's very possible you're actually loading two different copies of Blockly, and then registering the block definitions in one copy but injecting a workspace/toolbox from another copy. I know you said your paths aren't the issue, but setup irregularities like that can actually cause unexpected issues and this may be one of them.

Maribeth

Reply all

Reply to author

Forward