Error With Built-In Categories

[PIERRE LABROCHE]

Hi,

I started having an issue with the built-in Blockly toolbox categories like logic, math, functions, etc. My custom blocks in my own categories seem to work fine; it's only the built-in ones. I wanted to know if anyone had any insight into what the issue is and how I could fix it.

Best,

Pierre Labroche

[PIERRE LABROCHE]

Screenshots of issue

[Maribeth Bottorff]

Hi, can you please share 

1. what version of Blockly are you using?

2. How are you loading blockly and the message files? (e.g. loading them through a module loader, via script tag, etc?)

Thanks!

[PIERRE LABROCHE]

Hi Maribeth,

1. I was using the latest version of Blocky, v8.0.4 I believe

2. I was loading Blocky through scripts tags

I did managed to resolve the issue, I think, by adding message tags, tho its weird I never had a problem till now

Best,

Pierre

-- 
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 on the web visit https://groups.google.com/d/msgid/blockly/e21161de-4dc8-4332-8bc7-3f7aadda68e2n%40googlegroups.com.

[Maribeth Bottorff]

What do you mean by adding message tags? Or would you mind sharing the change you had to make to fix it?

8.0.4 fixed a bug where if you loaded Blockly / the message files via script tags, the messages didn't load correctly. For the use cases we know about I would actually expect to see your error state above in v8.0.3 (and below) but fixed in 8.0.4 so I'm very interested in how your use case differs from the ones we tested so that I can make sure we haven't broken anyone! Thanks for helping us with this :)

Maribeth

[PIERRE LABROCHE]

Sorry,

I meant adding a script tag with src to messages.js. Here are some images of the change I made and the affect it had on Blockly. Also, I included a image of the version I was using based on the package.json.

Please let me know if this helps with understanding what might be happening.

Best,

Pierre Labroche

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/92eb5d10-dbc3-4093-ae85-1193487e7e79n%40googlegroups.com.

[Maribeth Bottorff]

Thanks for the info! That helps a lot. I'll try to explain what's happening for posterity and in case anyone else runs into this and then I'll give a recommendation on what to do.

So for background there are 3 main ways to get Blockly onto your webpage:

1. Use a module loader, get blockly from npm and import it into your app (recommended)

2. Use a cdn like unpkg (or download from npm into node_modules), use script tags to load the compiled code directly

3. Download the code from github and use script tags to load the necessary files (not recommended, but still technically supported since our documentation says you can do this)

We tested this patch for the first two use cases but not the last one, and it looks like that's the approach you're using. Apologies that we didn't catch this case for you.

The reason it doesn't work is that now the "unpackaged" en.js file doesn't work directly anymore. It only works once the UMD wrapper is added to the file, which happens during our package step and is included in the npm package, but isn't actually committed in the git repo. I think we will probably fix this and commit the wrapped file in another patch so that messages work for all 3 use cases, but I need to discuss with our packaging expert.

The fact that adding a script tag for `messages.js` works for you is basically a coincidence. That is the raw message file that translators use. It is not intended to be used directly and it will only work for English translations. It also may not continue to work in the future. I know at least one of our own demos uses it but that is also a mistake in our code :)

So for how to fix this:

- Ideally, you could switch to one of the other two methods listed above and don't download the code from github directly. An easy way to do this is to use npm to download blockly, the files will be placed in node_modules, and you can include a script tag that uses the files directly out of node_modules. Some of our examples do this e.g. https://github.com/google/blockly-samples/blob/master/examples/mirror-demo/index.html#L8 (the message file you need is msg/en.js)

- Keep using messages.js but know that in the future that approach may not continue to work and it only works for English.

- Download this file https://unpkg.com/blockly @8.0.4/msg/en.js (remove the space before the @ sign, have to circumvent google's email address scrubber) and use it instead of the one in the github repo. This would be similar to approach #2 listed above. But you want to be careful to keep this up to date and in sync with the version of Blockly you're using.

- Wait for us to release another patch containing the compiled message files, and use those (will confirm that we plan to do this asap)

- Compile/package blockly yourself and use the packaged version of the message file (really not recommended, but included here for completeness)

TLDR: Thank you for the info and we will work on a solution so that you don't have to use `messages.js`

Maribeth

[PIERRE LABROCHE]

Ofc thank you! 

If you could still help, I tried to use you're preferred method trying to follow the example you linked but it didn't work. It said Blockly wasn't defined

    <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>
    <script src="../node_modules/blockly/python_compressed.js"></script>
    <script src="scripts/ziro_blocks_python.js"></script>

Do I maybe need to add  import blockly?

Best,

Pierre

[Christopher Allen]

Hi Pierre,

I'm replying to this because I was the person who suggested (and code-reviewed) the fix that Beka wrote that went into 8.0.4 to fix a related issue with loading messages files via require(), and which has inadvertently caused a problem for you.

On Fri, 5 Aug 2022 at 00:24, 'Maribeth Bottorff' via Blockly <blo...@googlegroups.com> wrote:

So for background there are 3 main ways to get Blockly onto your webpage:

[...]

3. Download the code from github and use script tags to load the necessary files (not recommended, but still technically supported since our documentation says you can do this)

This is doubtless my own misunderstanding, but: I had actually been under the impression that "download the code from github" was no longer a supported way of getting blockly.  (Indeed, it seems evident that in version 8.0.4 it is no longer supported, so I guess I am technically correct, but alas…)

I agree with Maribeth about the fact that we should probably fix this, but I'm not sure that checking in the wrapped copies is the best approach, and it is at the very least connected to a larger discussion about checking in build products to the blockly repository.  By fortuitous coincidence I just yesterday put an item on the agenda for next week's team meeting to discuss this very topic, so we should be able to work on a resolution quite soon.

In the meantime, I would offer the following workaround that, while definitely not officially supported, should fix the problem in v8.0.4 (and will probably continue to work for the foreseeable future too), which is to run

npm ci && npm run build && npm run package

in the blockly repository, and then use the files in the dist/ subdirectory (e.g. blockly/dist/msg/en.js) instead of ones from elsewhere in the repository.  This works because the Blockly npm package is created from that directory after running those commands, so the files there should exactly match the ones available via npm or unpkg.

Christopher

[PIERRE LABROCHE]

Thanks! That suggestion seems to work!

I hope the meeting about the resolution goes well!

Best,

Pierre Labroche