caught CKEditorError: ckeditor-duplicated-modules

[klprasad]

I am running two applications with localhost:4301 and localhost:4310 inside a angular single spa application with ckeditors. If I run the two applications individually the ckeditor is working fine, we are not getting any error. but if we run both applications at a time we are getting CKEditorError: ckeditor-duplicated-modules error. can anyone please check once. Ideally those are two different websites with different modules and builds. but if run both at a time ckeditor is throwing duplicate module error.

[Witoso]

Hey, thanks for reaching out! Could you share information about the directory structure, which editor build type you use, how do you install it, and how the editors are loaded? That could help us pinpoint the problem.

[klprasad]

Hi,
we are running the Angular single spa application. with two apps. below are the details.
root app : localhost:4200.
App1 : localhost:4301,
editor : "@ckeditor/ckeditor5-angular": "4.0.0",
"@ckeditor/ckeditor5-build-classic": "34.2.0",
"@ckeditor/ckeditor5-build-decoupled-document": "34.2.0",
App 2 : localhost:4310
editor : "@ckeditor/ckeditor5-angular": "6.0.1",
"@ckeditor/ckeditor5-build-classic": "37.1.0",
we are builing both the application with @angular-builders/custom-webpack:browser. if we run both apps individually editor is working. if we run app1 then in node_modules of localhost:4200 editor is components are downloaded. when we click on app2 getting duplicate module error. because the ckeditor modules are again trying to download. As per my understanding, Ideally both applications(App1 and App2) are running in different ports so the node modules should not conflict each other. whenever we click any app1 it should load the corresponding application modules only. but it is not happing with the Editor modules. we are also using same Angular material modules on both applications but didn't get any duplicate modules error. this issue is happening only when we add the CKEditor modules. can someone please look into the issue and advice here.

Thanks.

[Witoso]

As you can see in the error description, this problem appears when some of its [editor's] modules were duplicated (evaluated and executed twice). Module duplication leads to inevitable runtime errors.

Are the editors that you are using split and separate js files?

[klprasad]

both editors are different in both the sites(localhost:4301 and localhost:4310), if we didn't add the editor module we are getting build errors. while running the single spa application(localhost:4200) with the above two applications((localhost:4301 and localhost:4310) we are getting duplicate modules error. how do we fix this? since both applications are independent on each other we need to install the CKEditor modules separately in each application to fix the build issues, but while running the combined angular single spa application with those two applications, only one application which loads first is working the second application not working getting the above error.

[Witoso]

but while running the combined angular single spa application with those two applications

And that's the problem I think. Maybe the SPA is bundling editors together (building them), and modules are duplicated . As I can see the editors have different versions of packages. Try to have a separate build process with webpack for both editors. You could place them in the vendor directory, separate folderseditor1, editor2. Prebuild them to js before starting the SPA, and in the SPA just load already built js files.