Advanced Playground broken (in develop)

[cpcallen]

Describe the bug

The Advanced Playground fails to load due to errors being thrown.

To Reproduce

Steps to reproduce the behavior:

1. Check out develop (as of eca5ee2, but probably much earlier).
2. Run npm install
3. Run npm start
4. Open JavaScript console in resulting browser window.
5. Click on "Advanced" link.
6. See error in console (see below).

Expected behaviour

The advanced playground loads.

Desktop (please complete the following information):

• OS: macOS 11.6
• Browser: Chrome
• Version: 95.0.4638.69 (Official Build) (x86_64)

Stack Traces

options.js:539 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'theme')
    at options.js:539
    at Al (options.js:69)
    at index.js:309

[alschmiedt]

Ok so I tested with dev-tools version 2.6.2-beta.0 and the new error I am now getting is

TypeError: Cannot add property useDebugger, object is not extensible

It is coming from this line and can pretty easily be fixed by using startDebugger. However, when I fix this and run the advanced playground the debugger is no longer working. I think it has something to do with this line Blockly.blockRendering.Debug = DebugRenderer;. When I debugged it looked like the debugger in core is getting called, but the config object in samples is getting updated.

[alschmiedt]

More updates:

• The above error can be fixed by replacing this line with Blockly.blockRendering.debug.startDebugger().
• This makes it so that the advanced playground will load however I get a new error:

Uncaught Error: Module Blockly.JavaScript has been loaded incorrectly. Note, modules cannot be loaded as normal scripts. They require some kind of pre-processing step. You're likely trying to load a module via a script tag or as a part of a concatenated bundle without rewriting the module. For more info see: https://github.com/google/closure-library/wiki/goog.module:-an-ES6-module-like-alternative-to-goog.provide.

Additional Information
For some reason just running npm run start in dev-tools was not creating a dist folder so it was complaining when I tried to link. So I had to run npm run build for it to work. Just in case someone else runs into this.

Also, just to note that the debug renderer still will not work after this change. I have opened this issue to track that problem.

[cpcallen]

• This makes it so that the advanced playground will load however I get a new error:

Uncaught Error: Module Blockly.JavaScript has been loaded incorrectly. Note, modules cannot be loaded as normal scripts. […]

This is expected since goog.modules can't be loaded with <script> tags. The advanced playground will need the same updates the regular playground got in #5715 and in #5721 (specifically, commit e6e39bd).

Additional Information For some reason just running npm run start in dev-tools was not creating a dist folder so it was complaining when I tried to link. So I had to run npm run build for it to work. Just in case someone else runs into this.

As far as I know it is typical in the npm ecosystem to need to run npm build before npm start—though I think it also usual that packages are configured so that npm install runs npm build as well.

[cpcallen]

FYI this is still not fixed for me. On develop as of b52c017, the relevant error appears to be:

 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'theme')
    at options.js:539
    at Al (options.js:69)
    at index.js:309

[alschmiedt]

Hmm did you link to the latest version of dev-tools on the 2021_q4_release branch?

[alschmiedt]

This should be fixed with #5823. Note that it will require an npm install.