Skip to content

Sample projects demonstrating how to integrate Blockly into your project

License

Notifications You must be signed in to change notification settings

LarryKlugerDS/blockly-samples

 
 

Repository files navigation

blockly-react Bug reproduction example

  1. I added code to blockly-react/src/App.js to use this.setState:
  constructor(props) {
    super(props);
    this.state = {code: ""};
  }

  generateCode = () => {
    var code = BlocklyJS.workspaceToCode(this.simpleWorkspace.workspace);
    console.log(code);
    this.setState({code: code});
  }

....

And used this.state.code in the render:

<div><h2>Code</h2><code><pre>{this.state.code}</pre></code></div>

This broke the app with the error that the Blockly component's render returned null. (See below)

My fix:

Add

    shouldComponentUpdate() {return false}

to blockly-react/src/Blockly/BlocklyComponent.jsx

Is this the right fix?

The error and stack

Uncaught Invariant Violation: BlocklyComponent(...): 
Nothing was returned from render. 
This usually means a return statement is missing. Or, to render nothing, return null.
    at http://localhost:3000/static/js/0.chunk.js:50494:40
    at reconcileChildFibers (http://localhost:3000/static/js/0.chunk.js:50497:19)
    at reconcileChildren (http://localhost:3000/static/js/0.chunk.js:52610:32)
    at finishClassComponent (http://localhost:3000/static/js/0.chunk.js:52991:9)
    at updateClassComponent (http://localhost:3000/static/js/0.chunk.js:52926:28)
    at beginWork$1 (http://localhost:3000/static/js/0.chunk.js:54527:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/0.chunk.js:35509:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/0.chunk.js:35558:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/0.chunk.js:35612:35)
    at beginWork$$1 (http://localhost:3000/static/js/0.chunk.js:59716:11)
    at performUnitOfWork (http://localhost:3000/static/js/0.chunk.js:58648:16)
    at workLoopSync (http://localhost:3000/static/js/0.chunk.js:58626:26)
    at renderRoot (http://localhost:3000/static/js/0.chunk.js:58301:15)
    at runRootCallback (http://localhost:3000/static/js/0.chunk.js:57955:24)
    at http://localhost:3000/static/js/0.chunk.js:47032:28
    at unstable_runWithPriority (http://localhost:3000/static/js/0.chunk.js:67259:16)
    at runWithPriority$2 (http://localhost:3000/static/js/0.chunk.js:46980:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/0.chunk.js:47027:11)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/0.chunk.js:47015:7)
    at discreteUpdates$1 (http://localhost:3000/static/js/0.chunk.js:58087:11)
    at discreteUpdates (http://localhost:3000/static/js/0.chunk.js:37586:16)
    at dispatchDiscreteEvent (http://localhost:3000/static/js/0.chunk.js:41400:7)
index.js:1375 The above error occurred in the <BlocklyComponent> component:
    in BlocklyComponent (at App.js:55)
    in header (at App.js:52)
    in div (at App.js:51)
    in App (at src/index.js:7)

About

Sample projects demonstrating how to integrate Blockly into your project

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.8%
  • HTML 25.3%
  • TypeScript 16.4%
  • Vue 5.6%
  • CSS 1.9%