search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
8.7k stars 3.62k forks source link

Ckeditor5 Duplicate Module Error For Angular Webpack Module Federation #15104

Open SaishNarvekar opened 9 months ago

SaishNarvekar commented 9 months ago

📝 Provide detailed reproduction steps (if any)

  1. Create custom build for ckeditor5
  2. Publish custom build as npm package
  3. Use custom build in 2 different angular projects which are using webpack module federation
  4. Use angular routing to route from one remote app 1 to another remote app 2 which are loaded from remoteEntry.js file of webpack

✔️ Expected result

It should goto remote app 2

❌ Actual result

check console for duplicate module error

📃 Other details

I am encountering an issue with using a custom CKEditor build (ckeditor5-custom-build) in one Angular remote app(app1) and same custom CKEditor build (ckeditor5-custom-build) in npm package @research/widgets in a different Angular remote app (app2). Below is the output of 'npm ls' for app2, which is using the CKEditor custom build through @research/widgets. I need assistance in understanding this problem.

rmx@0.0.0
├── __ngcc_entry_points__.json@ extraneous
├─┬ @angular-architects/module-federation@15.0.3
│ ├── @angular-architects/module-federation-runtime@15.0.3
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── @angular/platform-browser-dynamic@15.2.7 deduped
│ ├── callsite@1.0.0
│ ├── node-fetch@2.6.9
│ ├── rxjs@7.5.7 deduped
│ ├── semver@7.4.0
│ └── word-wrap@1.2.3
├─┬ @angular-devkit/build-angular@15.2.6
├─┬ @angular-eslint/builder@15.2.1
│ ├── eslint@8.35.0 deduped
│ └── typescript@4.8.4 deduped
├─┬ @angular-eslint/eslint-plugin-template@15.2.1
├─┬ @angular-eslint/eslint-plugin@15.2.1
├─┬ @angular-eslint/schematics@15.2.1
├─┬ @angular-eslint/template-parser@15.2.1
├─┬ @angular/animations@15.2.7
├─┬ @angular/cdk@15.2.6
├─┬ @angular/cli@15.2.6
├─┬ @angular/common@15.2.7
├─┬ @angular/compiler-cli@15.2.7
├─┬ @angular/compiler@15.2.7
├─┬ @angular/core@15.2.7
├─┬ @angular/forms@15.2.7
├─┬ @angular/localize@15.2.7
├─┬ @angular/material@15.2.6
├─┬ @angular/platform-browser-dynamic@15.2.7
├─┬ @angular/platform-browser@15.2.7
├─┬ @angular/router@15.2.7
├─┬ @ckeditor/ckeditor5-angular@7.0.0
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── @angular/forms@15.2.7 deduped
│ ├── @ckeditor/ckeditor5-core@39.0.2
│ ├── @ckeditor/ckeditor5-engine@39.0.2
│ ├── @ckeditor/ckeditor5-utils@39.0.2
│ ├── @ckeditor/ckeditor5-watchdog@39.0.2
│ ├── rxjs@7.5.7 deduped
│ └── tslib@2.5.0 deduped
├─┬ @ng-bootstrap/ng-bootstrap@14.1.0
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── @angular/forms@15.2.7 deduped
│ ├── @angular/localize@15.2.7 deduped
│ ├── @popperjs/core@2.11.7 deduped
│ ├── rxjs@7.5.7 deduped
│ └── tslib@2.5.0 deduped
├── @popperjs/core@2.11.7
├─┬ @research/shared-assets@2.56.0
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ └── tslib@2.5.0 deduped
├─┬ @research/widgets@5.0.1
│ ├── @angular/cdk@15.2.6 deduped
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── @angular/material@15.2.6 deduped
│ ├── @ckeditor/ckeditor5-angular@7.0.0 deduped
│ ├── angular-gridster2@15.0.4 deduped
│ ├── ckeditor5-custom-build@2.0.0 deduped
│ ├── d3-cloud@1.2.5 deduped
│ ├── d3@7.7.0 deduped
│ ├── dayjs@1.11.7 deduped
│ ├── exceljs@4.3.0 deduped
│ ├── file-saver@2.0.5 deduped
│ ├── highcharts-angular@3.0.0 deduped
│ ├── ngx-scrollbar@10.0.0 deduped
│ ├── primeng@15.3.0 deduped
│ ├── tslib@2.5.0 deduped
│ └── underscore@1.13.6 deduped
├── @types/crypto-js@4.1.1
├── @types/jasmine@4.0.3
├─┬ @typescript-eslint/eslint-plugin@5.58.0
│ ├── @eslint-community/regexpp@4.5.0
│ ├── @typescript-eslint/parser@5.58.0 deduped
│ ├── @typescript-eslint/scope-manager@5.58.0
│ ├── @typescript-eslint/type-utils@5.58.0
│ ├── @typescript-eslint/utils@5.58.0
│ ├── debug@4.3.4
│ ├── eslint@8.35.0 deduped
│ ├── grapheme-splitter@1.0.4
│ ├── ignore@5.2.4 deduped
│ ├── natural-compare-lite@1.4.0
│ ├── semver@7.4.0 deduped
│ └── tsutils@3.21.0
├─┬ @typescript-eslint/parser@5.58.0
│ ├── @typescript-eslint/scope-manager@5.58.0 deduped
│ ├── @typescript-eslint/types@5.58.0
│ ├── @typescript-eslint/typescript-estree@5.58.0
│ ├── debug@4.3.4 deduped
│ └── eslint@8.35.0 deduped
├─┬ angular-gridster2@15.0.4
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── rxjs@7.5.7 deduped
│ └── tslib@2.5.0 deduped
├─┬ bootstrap@5.2.3
│ └── @popperjs/core@2.11.7 deduped
├─┬ ckeditor5-custom-build@2.0.0
│ ├── @ckeditor/ckeditor5-alignment@39.0.2
│ ├── @ckeditor/ckeditor5-basic-styles@39.0.2
│ ├── @ckeditor/ckeditor5-core@39.0.2 deduped
│ ├── @ckeditor/ckeditor5-editor-classic@39.0.2
│ ├── @ckeditor/ckeditor5-essentials@39.0.2
│ ├── @ckeditor/ckeditor5-font@39.0.2
│ ├── @ckeditor/ckeditor5-image@39.0.2
│ ├── @ckeditor/ckeditor5-link@39.0.2
│ ├── @ckeditor/ckeditor5-list@39.0.2
│ ├── @ckeditor/ckeditor5-paragraph@39.0.2
│ ├── @ckeditor/ckeditor5-ui@39.0.2
│ ├── @ckeditor/ckeditor5-upload@39.0.2
│ ├── @ckeditor/ckeditor5-utils@39.0.2 deduped
│ └── @ckeditor/ckeditor5-widget@39.0.2
├── crypto-js@4.1.1
├─┬ d3-cloud@1.2.5
│ └── d3-dispatch@1.0.6
├─┬ d3@7.7.0
├── dayjs@1.11.7
├─┬ eslint@8.35.0
├─┬ exceljs@4.3.0
│ ├── archiver@5.3.1
│ ├── dayjs@1.11.7 deduped
│ ├── fast-csv@4.3.6
│ ├── jszip@3.10.1
│ ├── readable-stream@3.6.0
│ ├── saxes@5.0.1
│ ├── tmp@0.2.1
│ ├── unzipper@0.10.11
│ └── uuid@8.3.2
├── file-saver@2.0.5
├─┬ highcharts-angular@3.0.0
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── highcharts@10.3.2 deduped
│ └── tslib@2.5.0 deduped
├── highcharts@10.3.2
├── jasmine-core@4.1.1
├─┬ karma-chrome-launcher@3.1.1
│ └── which@1.3.1
├─┬ karma-coverage@2.2.0
├─┬ karma-jasmine-html-reporter@1.7.0
├─┬ karma-jasmine@5.0.1
├─┬ karma-junit-reporter@2.0.1
├─┬ karma@6.3.20
├── material-icons@1.13.1
├── material-symbols@0.4.5
├─┬ ngx-build-plus@14.0.0
│ ├── @angular-devkit/build-angular@15.2.6 deduped
│ ├── @schematics/angular@15.2.6 deduped
│ ├── rxjs@7.5.7 deduped
│ └── webpack-merge@5.8.0 deduped
├─┬ ngx-scrollbar@10.0.0
│ ├── @angular/cdk@15.2.6 deduped
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── bezier-easing@2.1.0
│ ├── rxjs@7.5.7 deduped
│ └── tslib@2.5.0 deduped
├─┬ ngx-tippy-wrapper@6.1.0
│ ├── tippy.js@6.3.7
│ └── tslib@2.5.0 deduped
├─┬ primeng@15.3.0
│ ├── @angular/common@15.2.7 deduped
│ ├── @angular/core@15.2.7 deduped
│ ├── @angular/forms@15.2.7 deduped
│ ├── primeicons@6.0.1
│ ├── rxjs@7.5.7 deduped
│ ├── tslib@2.5.0 deduped
│ └── zone.js@0.11.8 deduped
├─┬ rxjs@7.5.7
│ └── tslib@2.5.0 deduped
├── tslib@2.5.0
├── typescript@4.8.4
├── underscore@1.13.6
└─┬ zone.js@0.11.8
  └── tslib@2.5.0 deduped

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

MatejFacko commented 3 months ago

I am afraid that this is still not supported, few related issues were raised/closed. https://github.com/ckeditor/ckeditor5/issues/8397 https://github.com/ckeditor/ckeditor5/issues/8463 Is there any workaround available at the moment now?