Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Are we using Webpack's Module Federation correctly? #515

Open
frapell opened this issue Dec 14, 2022 · 4 comments
Open

Are we using Webpack's Module Federation correctly? #515

frapell opened this issue Dec 14, 2022 · 4 comments

Comments

@frapell
Copy link
Sponsor Member

frapell commented Dec 14, 2022

So, as far as I understand, if a bundle imports a module, it is reused when another bundle imports it again... This doesn't appear to be the case...
Take for instance TinyMCE, this is what I see under the "Network" tab in Firefox when editing a mosaic:

image

As can be seen, bundle.min.js pulls a tinymce from its chunks directory, and then plone-mosaic-remote.min.js pulls another one from mosaic's chunks directory. It does the same with the tinymce_plugins chunk.
Furthermore, it can be seen from the "Debugger" tab, that in fact a bunch of other patterns are re-imported from the @plone/mockup package from Mosaic's node_modules, when it should be reusing the ones already imported from Mockup...

image

Another example, select2

image

Mosaic has @plone/mockup pinned to be 5.0.0-beta.7, which is the latest and the same one used in plone.staticresources so all versions should be the same. Furthermore, I used yarn link to link to the same mockup pulled from source, and this same behavior is observed.

I believe there's something wrong in the way webpack module federation is being used, but I cannot figure it out... I see in the devtools console
Patternslib Module Federation: Loaded and initialized bundle "__patternslib_mf__plonemosaic". shouldn't I be seeing the same for mockup ?

@thet If you can shed some light here, that would be greatly appreciated :) (And in case it hasn't been merged yet, you can use this branch #514)

@frapell
Copy link
Sponsor Member Author

frapell commented Dec 14, 2022

FYI, if not using my branch from #514, these are the different chunks that can be seen loaded from the network tab

From mosaic:

src/pat/tinymce/tinymce.js
chunks/30062.dd31367279d29c4fb5e4.min.js

src/pat/tinymce/tinymce--implementation.js
chunks/96870.6a77d40e26d71c7cb5c9.min.js

node_modules/tinymce/tinymce.js
chunks/47575.b91c7b51d3b5f8914a6d.min.js

From mockup tinymce.b2966cfe338b52be6995.min.js

@frapell
Copy link
Sponsor Member Author

frapell commented Jan 5, 2023

@thet Friendly reminder we need your eyes here when you can... Notice that #514 was just merged to master, so my most recent comment is outdated.

@thet
Copy link
Member

thet commented Apr 21, 2023

@frapell

sorry for the long delay.

I recently had a similar issue of double-loading tinymce javascript.
That was due to different imports.
Once it was:
const tiny = (await import("tinymce/tinymce")).default;
The other time it was:
const tiny = (await import("tinymce")).default;

That caused tinymce to be imported twice.

could that be the issue? In mosaic we're importing from pat-tinymce, which should be fine. do you have some other import mechanism or a custom tinymce plugin which imports differently?

@petschki
Copy link
Member

Maybe its because the pat-textareamimetypeselector has a global import here https://github.com/plone/mockup/blob/master/src/pat/textareamimetypeselector/textareamimetypeselector.js#L3 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: No status
Development

No branches or pull requests

3 participants