Issue with Blockly JavaScript Compilation Error ( export 'JavaScript' (imported as 'Blockly') was not found in 'blockly/core' )

[Robokidz Developers]

Hello Blockly Community,

I hope this message finds you well. I've been encountering a persistent issue while trying to compile my Blockly project and could really use some assistance.

Here's the error message I've been getting:

export 'JavaScript' (imported as 'Blockly') was not found in 'blockly/core'

I have tried various approaches over the past two days to resolve this problem, but unfortunately, none have been successful so far.

To provide some context, I'm attempting to integrate a custom block (motion_movesteps) into my Blockly project using the Blockly JavaScript library. I've followed the documentation closely, including importing necessary modules (blockly/core, blockly/blocks, blockly/javascript) and defining the block as per the guidelines.

Below is a snippet of my code for reference:

import * as Blockly from 'blockly/core';

import 'blockly/blocks';

import 'blockly/javascript';

// Move steps block

Blockly.Blocks['motion_movesteps'] = {

  init: function () {

    this.jsonInit({

      type: 'motion_movesteps',

      message0: 'Move %1 steps',

      args0: [

        {

          type: 'input_value',

          name: 'STEPS',

          check: 'Number',

        },

      ],

      previousStatement: null,

      nextStatement: null,

      colour: '#59C059',

      tooltip: 'Move the character by specified number of steps',

    });

  },

};

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

  var steps = Blockly.JavaScript.valueToCode(block, 'STEPS', Blockly.JavaScript.ORDER_ATOMIC) || '0';

  return `moveSteps(${steps});\n`;

};

  

I'd greatly appreciate any insights or suggestions you may have to help me resolve this issue. Thank you in advance for your time and assistance.  

[Aaron Dodson]

Hi,

It looks like you're using a mix of methods for importing/defining generators. Try replacing your imports as follows:

import * as Blockly from 'blockly/core';

import {javascriptGenerator} from 'blockly/javascript';

And then update your code generator definition to:

javascriptGenerator.forBlock['motion_movesteps'] = function(block) {...} instead of the current Blockly.JavaScript['motion_movesteps'] = function(block) {...}.

I think that should get things mostly sorted out; do you mind sharing which docs you've been referencing? It sounds like we may have some that need to be updated.


Thanks!
- Aaron

[Robokidz Developers]

You're welcome, Aaron! Thanks a lot for your help; it was working.

[Robokidz Developers]

but now it was showing   

JavaScript generator does not know how to generate code for block type "motion_movesteps".

there is the total code

import './CustomBlocks';

import React, { useEffect, useRef } from 'react';

import * as Blockly from 'blockly/core';

import 'blockly/blocks';

import { javascriptGenerator } from 'blockly/javascript';

const BlocklyWorkspace = ({ onRunCode }) => {

  const workspaceRef = useRef(null);

  useEffect(() => {

    const workspace = Blockly.inject(workspaceRef.current, {

      toolbox: `

        <xml>

          <category name="Motions">

            <block type="motion_movesteps"></block>

            <block type="motion_moveleft"></block>

            <block type="motion_moveright"></block>

            <block type="motion_turnleft"></block>

            <block type="motion_turnright"></block>

            <block type="math_number">

              <field name="NUM">10</field>

            </block>

          </category>

        </xml>

      `,

      grid: {

        spacing: 20,

        length: 3,

        colour: '#ccc',

      },

    });

    return () => workspace.dispose();

  }, []);

  const runCode = () => {

    const code = javascriptGenerator.workspaceToCode(Blockly.getMainWorkspace());

    if (onRunCode) {

      onRunCode(code);

    }

  };

  return (

    <div>

      <div ref={workspaceRef} style={{ height: '400px', width: '100%' }}></div>

      <button onClick={runCode}>Run Code</button>

    </div>

  );

};

export default BlocklyWorkspace;

import * as Blockly from 'blockly/core';

import { javascriptGenerator } from 'blockly/javascript';

// Move steps block

Blockly.Blocks['motion_movesteps'] = {

  init: function () {

    this.jsonInit({

      type: 'motion_movesteps',

      message0: 'Move %1 steps',

      args0: [

        {

          type: 'input_value',

          name: 'STEPS',

          check: 'Number',

        },

      ],

      previousStatement: null,

      nextStatement: null,

      colour: '#59C059',

      tooltip: 'Move the character by specified number of steps',

    });

  },

};

// Define the generator function for motion_movesteps block

javascriptGenerator['motion_movesteps'] = function(block) {

  var steps = javascriptGenerator.valueToCode(block, 'STEPS', javascriptGenerator.ORDER_ATOMIC) || '0';

  return `alert('Moving ${steps} steps!');\n`;

};

// javascriptGenerator['motion_movesteps'] = function (block) {

//   var steps = javascriptGenerator.valueToCode(block, 'STEPS', javascriptGenerator.ORDER_ATOMIC) || '0';

//   return `moveSteps(${steps});\n`;

// };

import React, { useState } from 'react';

import Unicon from '../unicon_PNG.png';

const Characters = ({ commands }) => {

  const [position, setPosition] = useState(0);

  const [rotation, setRotation] = useState(0);

  const executeCommands = () => {

    commands.forEach((command) => {

      if (command.startsWith('moveSteps')) {

        const steps = parseInt(command.match(/\((.*)\)/)[1]);

        moveSteps(steps);

      } else if (command === 'moveLeft()') {

        moveLeft();

      } else if (command === 'moveRight()') {

        moveRight();

      } else if (command === 'turnLeft()') {

        turnLeft();

      } else if (command === 'turnRight()') {

        turnRight();

      }

    });

  };

  const moveSteps = (steps) => {

    setPosition((prev) => prev + steps);

  };

  const moveLeft = () => {

    setPosition((prev) => prev - 10);

  };

  const moveRight = () => {

    setPosition((prev) => prev + 10);

  };

  const turnLeft = () => {

    setRotation((prev) => prev - 45);

  };

  const turnRight = () => {

    setRotation((prev) => prev + 45);

  };

  return (

    <div>

      <div className="character-container">

        <img

          src={Unicon}

          alt="Character"

          style={{ marginLeft: position, transform: `rotate(${rotation}deg)` }}

          height={'100px'}

        />

      </div>

      <button onClick={executeCommands}>Execute Commands</button>

    </div>

  );

};

export default Characters;

import * as Blockly from 'blockly/core';

import { javascriptGenerator } from 'blockly/javascript';

// Define motion blocks

Blockly.Blocks['motion_movesteps'] = {

  init: function() {

    this.appendValueInput("STEPS")

        .setCheck("Number")

        .appendField("move");

    this.appendDummyInput()

        .appendField("steps");

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(230);

    this.setTooltip('');

    this.setHelpUrl('');

  }

};

Blockly.Blocks['motion_moveleft'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("move left");

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(230);

    this.setTooltip('');

    this.setHelpUrl('');

  }

};

Blockly.Blocks['motion_moveright'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("move right");

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(230);

    this.setTooltip('');

    this.setHelpUrl('');

  }

};

Blockly.Blocks['motion_turnleft'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("turn left");

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(230);

    this.setTooltip('');

    this.setHelpUrl('');

  }

};

Blockly.Blocks['motion_turnright'] = {

  init: function() {

    this.appendDummyInput()

        .appendField("turn right");

    this.setPreviousStatement(true, null);

    this.setNextStatement(true, null);

    this.setColour(230);

    this.setTooltip('');

    this.setHelpUrl('');

  }

};

// JavaScript code generation for motion blocks

javascriptGenerator['motion_movesteps'] = function(block) {

  var value_steps = javascriptGenerator.valueToCode(block, 'STEPS', javascriptGenerator.ORDER_ATOMIC);

  var code = `moveSteps(${value_steps});\n`;

  console.log(code);  // Add console log for debugging

  return code;

};

javascriptGenerator['motion_moveleft'] = function(block) {

  var code = 'moveLeft();\n';

  return code;

};

javascriptGenerator['motion_moveright'] = function(block) {

  var code = 'moveRight();\n';

  return code;

};

javascriptGenerator['motion_turnleft'] = function(block) {

  var code = 'turnLeft();\n';

  return code;

};

javascriptGenerator['motion_turnright'] = function(block) {

  var code = 'turnRight();\n';

  return code;

};

which i am straggling from last few dats 

On Thursday, July 11, 2024 at 4:02:39 AM UTC+5:30 ado...@google.com wrote:

[Robokidz Developers]

You're welcome, Aaron! Thanks a lot for your help; it was working.

On Thursday, July 11, 2024 at 4:02:39 AM UTC+5:30 ado...@google.com wrote:

[Aaron Dodson]

Hi,

I think you just need to have javascriptGenerator.forBlock['motion_movesteps'] rather than javascriptGenerator['motion_movesteps']. Hopefully that sorts it out for you!

- Aaron