Blocks no longer generate code and are not saved

[Max Stephen Russell]

My latest problem...  In my workspace, a few blocks persist and are represented in the generated code. Any new blocks from the toolbox do not generate code, and furthermore they disappear when the page is refreshed, leaving only the same persistent few with corresponding code.

What does it sound like I broke?

Steve

[Max Stephen Russell]

My question is probably a poor one. I will reconstruct my starter app and watch closely as I re-import files from another sample app. Then, if I still have a question, it will be worth posting.

[Max Stephen Russell]

This is a surprise: I installed the hello-world app again, as directed by Blockly, and rebooted my pc -- and now even the newly-installed hello-world app is running with the exact same issues I reported at the start of this thread. Basically, it is unresponsive when it comes to generating code and saving changes. My app also continues with the same troubles. Any suggestions?

Thanks!

Steve

[Mark Friedman]

Hi, Steve.  A few questions/ideas for you:

1. Is this app created via `npx @blockly/create-package app hello-world`
2. How are you running your app?  I.e. what commands are you using?
3. Does your browser's console log say anything pertinent?
4. Is it possible that you are still running other versions of your app that are listening on the same port?
5. Have you tried clearing your browser's cache and local storage for the app?

-Mark

--
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/ea64ec80-2f14-4aec-9acf-608a4682d3c7n%40googlegroups.com.

[Max Stephen Russell]

Thanks for the questions, Mark.

1. Is this app created via `npx @blockly/create-package app hello-world`

        Yes.

     2. How are you running your app?  I.e. what commands are you using?

        npm run start (or simply npm start)

     

     3. Does your browser's console log say anything pertinent?

        index.js:485 [webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.

log.js:39 [HMR] Waiting for update signal from WDS...
VM111:8 Uncaught TypeError: item.charAt is not a function
    at eval (eval at runCode (index.js:1:1), <anonymous>:8:6)
    at runCode (index.js:34:1)
    at eval (index.js:39:1)
    at ./src/index.js (bundle.js:432:1)
    at __webpack_require__ (bundle.js:564:32)
    at bundle.js:1635:37
    at bundle.js:1637:12Understand this errorAI
:8080/favicon.ico:1
       
       Failed to load resource: the server responded with a status of 404 (Not Found)Understand this errorAI
blockly_compressed.js:64 Blockly.utils.style.getSizeWithDisplay() was deprecated in v11.2 and will be deleted in v13.
warn$$module$build$src$core$utils$deprecation @ blockly_compressed.js:64Understand this warningAI

       4. Is it possible that you are still running other versions of your app that are listening on the same port?

     No. I forgot to mention I also rebooted my computer as well as used Task Manager to be sure nothing was running.

     5. Have you tried clearing your browser's cache and local storage for the app?

     I have cleared these things, though not my cookies.

[Max Stephen Russell]

Looks like I was wrong in my response to your question #4. I have found the new app running. It loaded in the browser after I typed in localhost:8080, I think. **This is not my strong suit!** However -- this instance is responding in the workspace properly. So now I will try to kill it and check everything again.

[Mark Friedman]

Steve,

  I think I may have been able to recreate your situation.  Let me see if I can figure out what is going on.

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/ae4a1c76-5585-41f5-bebb-63975dc65dcdn%40googlegroups.com.

[Max Stephen Russell]

Mark,

I’ll be most interested to hear the results of your troubleshooting when you get the chance. No rush. I just wanted you to know I am still here and am holding still with these files until then. Thank you.

-Steve

[Mark Friedman]

I think I've gotten to the bottom of this issue where the sample app gets into a state where it stops displaying generated code and stops saving (and therefore loading) blocks.  

If you put blocks on your workspace that lead to an exception being thrown while evaluating the generated code and then you refresh (or restart) your browser before fixing the situation (i.e. by modifying the blocks on your workspace) then you will be in the situation that you got into.

As to why this happens, here is the relevant part of the code for the sample app:

   

     23: const ws = Blockly.inject(blocklyDiv, {toolbox});
   24:
   25: // This function resets the code and output divs, shows the
   26: // generated code from the workspace, and evals the code.
   27: // In a real application, you probably shouldn't use `eval`.
   28: const runCode = () => {
   29:   const code = javascriptGenerator.workspaceToCode(ws);
   30:   codeDiv.innerText = code;
   31:
   32:   outputDiv.innerHTML = '';
   33:
   34:   eval(code);
   35: };
   36:
   37: // Load the initial state from storage and run the code.
   38: load(ws);
   39: runCode();
   40:
   41: // Every time the workspace changes state, save the changes to storage.
   42: ws.addChangeListener((e) => {
   43:   // UI events are things like scrolling, zooming, etc.
   44:   // No need to save after one of these.
   45:   if (e.isUiEvent) return;
   46:   save(ws);
   47: });
   48:
   49: // Whenever the workspace changes meaningfully, run the code again.
   50: ws.addChangeListener((e) => {
   51:   // Don't run the code when the workspace finishes loading; we're
   52:   // already running it once when the application starts.
   53:   // Don't run the code during drags; we might have invalid state.
   54:   if (
   55:     e.isUiEvent ||
   56:     e.type == Blockly.Events.FINISHED_LOADING ||
   57:     ws.isDragging()
   58:   ) {
   59:     return;
   60:   }
   61:   runCode();
   62: });

So, a few things happen when you initially load the sample app:

1. Set up the workspace, toolbox, etc. - line 23
2. Load any saved blocks (from your browser's local storage) onto the workspace. On the initial load there won't be any. - line 38
3. Display the generated code for the saved blocks. On the initial load there won't be any generated code to display. - line 30, via line 39
4. Run that code. On the initial load there won't be any generated code to run. - line 34, via line 39
5. Add a change listener to save your blocks (into your browser's local storage) when any relevant change occurs. - line 42
6. Add a change listener to display the generated code and run it (with eval) when any relevant change occurs. - line 50

All is well as you continue adding/modifying/deleting blocks and at some point your eval-ed code causes an exception.  Things are still more-or-less ok after this.  You edit your blocks, they get saved, the generated code gets displayed and run (albeit with an error), etc. 

At some point you refresh/restart your browser.  Now this is what happens:

1. Set up the workspace, toolbox, etc. - line 23
2. Load any saved blocks onto the workspace. Now there are some. - line 38
3. Display the generated code for the saved blocks. Now there will be some generated code to display. - line 30, via line 39
4. Run that code. Now there will be some code to run and that code will cause an exception! - line 34, via line 39

That's it!  Because of the exception thrown within the call to runCode at line 39, the code to add the change listeners at lines 42 and 50 don't get executed.  Since those change listeners don't get added, no modifications to the workspace get saved and no new code gets generated or run. The blocks that were last saved in the original loading of the sample app stay in the local storage of your browser like zombies.

To kill those zombies (i.e. delete the "bad" blocks from your browser's local storage):

1. Open Google Chrome
2. Press F12 to open the Developer Tools Console
3. Select Application in the top menu
4. Expand Local storage in the left menu
5. Right-click the site(s) you want to clear (probably http://localhost:8080)
6. Select Clear
7. Refresh the page

There are various ways to avoid this problem.  One, of course, is to not use eval 😉.  But assuming that you do want to use eval, at least while you are testing stuff, probably the simplest thing to do would be to replace the call to eval at line 34 with something like:

  try {

    eval(code);

  } catch (e) {

    console.error(e);

  }

Hope this helps!

-Mark

To view this discussion visit https://groups.google.com/d/msgid/blockly/1f7d979d-2909-40f1-bb73-1eab3195249an%40googlegroups.com.

[Max Stephen Russell]

Mark,

Thank you very much for following through on this and explaining the cause and cleanup so clearly. For several reasons, I have been studying the section of code to which you refer. I was wondering why I had been  getting an error at:

Line 32: outputDiv.innerHTML = '';

I’ll start completely over with the starter app and test more carefully as I make changes and add files from other samples. The biggest culprit was undoubtedly trying to properly bring script-tagged files into the import module  format. Maybe it’ll be more obvious to me on a second try.

-Steve