Multiple Blockly instances due to removal of resolve.alias (as well as historical structure of our monorepo...)

[rachel-fenichel]

Check for duplicates

• I have searched for similar issues before opening a new one.

Component

dev-tools

Description

Clicking the "random blocks" action in the advanced playground controls puts a random set of blocks on the workspsace, but all of them have no type and render as small black rectangles with some rounded corners.

Reproduction steps

1. Check out rc/v11.0.0
2. Run npm install at root
3. cd plugins/field-bitmap
4. npm start
5. Click the "Random Blocks" action in the controls

Stack trace

No response

Screenshots

No response

[cpcallen]

This bug is caused by build/test_bundle.js containing no less than seven copies of the blockly NPM package, and the copy used by dev-tools (as well as the one accessible via globalThis.Blockly) having no block definitions in Blockly.Blocks, because all the plugins that have loaded block definitions have each loaded them in to their own private copy of Blockly.

This problem was previously avoided (for Blockly only, not for any other possibly-duplicate dependencies) by having plugins/dev-scripts/config/webpack.config.json containing a resolve.alias for blockly that caused webpack to (in effect) rewrite import … from 'blockly' statements to all import the same copy of Blockly. Unfortunately, this is not compatible with the blockly npm package having an exports section in its package.json file and so it was removed in PR #2229 in preparation for v11.

Possible approaches to fix this:

• Convert the blockly and blockly-samples repos into a single monorepo that uses npm workspaces.
• Find another way to get npm to de-dup dependencies used by more than one plugin.
• Don't use lerna boot to cross-link plugins; instead let npm install the full set of dependencies for each, allowing npm dedupe to work correctly within each plugin.
• Modify the plugins so that none import blockly/core (etc.) directly but instead have a method to allow the client code to (import and) inject a single copy of blockly.

See also related previous discussion of duplicate deps in blockly-samples due to #2229.

[cpcallen]

Additional possible fix:

• Remove blockly as dev-dependency of all the plugins; add it as a dev-dependency to the top-level package.json instead. (Might be stymied by npm installing peer-dependencies.)