Module duplicate using classic editor custom build of ckeditor stable branch.

[foryougautam]

I am using your plugin to support math formulas, but it is not compatible with CKEditor version 41.4.2. I am encountering a module duplication error while using a custom build of CKEditor's classic editor from the stable branch." Please suggest if I am missing something

My package json
{
"name": "@ckeditor/ckeditor5-build-classic",
"version": "41.4.2",
"description": "The classic editor build of CKEditor 5 – the best browser-based rich text editor.",
"keywords": [
"ckeditor5-build",
"ckeditor",
"ckeditor5",
"ckeditor 5",
"wysiwyg",
"rich text",
"editor",
"html",
"contentEditable",
"editing",
"operational transformation",
"ot",
"collaboration",
"collaborative",
"real-time",
"framework"
],
"main": "./build/ckeditor.js",
"types": "./build/ckeditor.d.ts",
"files": [
"build",
"ckeditor5-metadata.json",
"CHANGELOG.md"
],
"dependencies": {
"@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2",
"@ckeditor/ckeditor5-autoformat": "41.4.2",
"@ckeditor/ckeditor5-basic-styles": "41.4.2",
"@ckeditor/ckeditor5-block-quote": "41.4.2",
"@ckeditor/ckeditor5-ckbox": "41.4.2",
"@ckeditor/ckeditor5-ckfinder": "41.4.2",
"@ckeditor/ckeditor5-cloud-services": "41.4.2",
"@ckeditor/ckeditor5-easy-image": "41.4.2",
"@ckeditor/ckeditor5-editor-classic": "41.4.2",
"@ckeditor/ckeditor5-essentials": "41.4.2",
"@ckeditor/ckeditor5-heading": "41.4.2",
"@ckeditor/ckeditor5-image": "41.4.2",
"@ckeditor/ckeditor5-indent": "41.4.2",
"@ckeditor/ckeditor5-link": "41.4.2",
"@ckeditor/ckeditor5-list": "41.4.2",
"@ckeditor/ckeditor5-media-embed": "41.4.2",
"@ckeditor/ckeditor5-paragraph": "41.4.2",
"@ckeditor/ckeditor5-paste-from-office": "41.4.2",
"@ckeditor/ckeditor5-table": "41.4.2",
"@ckeditor/ckeditor5-typing": "41.4.2",
"@isaul32/ckeditor5-math": "^41.4.2"
},
"devDependencies": {
"@ckeditor/ckeditor5-core": "41.4.2",
"@ckeditor/ckeditor5-dev-translations": "^42.0.0",
"@ckeditor/ckeditor5-dev-utils": "^41.0.0",
"@ckeditor/ckeditor5-theme-lark": "41.4.2",
"terser-webpack-plugin": "^4.2.3",
"typescript": "5.0.4",
"webpack": "^5.58.1",
"webpack-cli": "^4.9.0"
},
"author": "CKSource (http://cksource.com/)",
"license": "GPL-2.0-or-later",
"homepage": "https://ckeditor.com/ckeditor-5",
"bugs": "https://github.com/ckeditor/ckeditor5/issues",
"repository": {
"type": "git",
"url": "https://github.com/ckeditor/ckeditor5.git",
"directory": "packages/ckeditor5-build-classic"
},
"scripts": {
"build": "webpack --mode production",
"postbuild": "tsc -p ./tsconfig.types.json"
}
}

[Q9-K]

I also use the plugin with version 41.4.2 because the author said it needs time to migrate to version 42+. #143
But I also use @ckeditor/ckeditor5-vue in my project, ckeditor5-vue does not provide a version which supposes 41.4.2, so I changed its source code's package.json and rebuild as an external node_module for my project, and it works okay. I guess you may have the same problem with me.

[chuvanhoang888]

I have the same problem with you

[chuvanhoang888]

@Q9-K Can you guide me how to run this package without duplicate module error

[chuvanhoang888]

@foryougautam You can try removing package-lock.json file, node_modules and remove ^ before version of plugins in package.json file

{ "name": "ckeditor5-custom", "version": "24.0.0", "description": "The classic editor build of CKEditor 5 – the best browser-based rich text editor.", "keywords": [ "ckeditor5-build", "ckeditor", "ckeditor5", "ckeditor 5", "wysiwyg", "rich text", "editor", "html", "contentEditable", "editing", "operational transformation", "ot", "collaboration", "collaborative", "real-time", "framework" ], "main": "./build/ckeditor.js", "files": [ "build" ], "devDependencies": { "@ckeditor/ckeditor5-adapter-ckfinder": "41.4.2", "@ckeditor/ckeditor5-autoformat": "41.4.2", "@ckeditor/ckeditor5-basic-styles": "41.4.2", "@ckeditor/ckeditor5-block-quote": "41.4.2", "@ckeditor/ckeditor5-ckfinder": "41.4.2", "@ckeditor/ckeditor5-core": "41.4.2", "@ckeditor/ckeditor5-dev-utils": "41.0.0", "@ckeditor/ckeditor5-dev-webpack-plugin": "31.1.13", "@ckeditor/ckeditor5-easy-image": "41.4.2", "@ckeditor/ckeditor5-editor-classic": "41.4.2", "@ckeditor/ckeditor5-essentials": "41.4.2", "@ckeditor/ckeditor5-heading": "41.4.2", "@ckeditor/ckeditor5-image": "41.4.2", "@ckeditor/ckeditor5-indent": "41.4.2", "@ckeditor/ckeditor5-link": "41.4.2", "@ckeditor/ckeditor5-list": "41.4.2", "@ckeditor/ckeditor5-media-embed": "41.4.2", "@ckeditor/ckeditor5-paragraph": "41.4.2", "@ckeditor/ckeditor5-paste-from-office": "41.4.2", "@ckeditor/ckeditor5-table": "41.4.2", "@ckeditor/ckeditor5-theme-lark": "41.4.2", "@ckeditor/ckeditor5-typing": "41.4.2", "@isaul32/ckeditor5-math": "41.4.2", "postcss-preset-env": "^10.0.0", "webpack-cli": "^5.1.4" }, "engines": { "node": ">=12.0.0", "npm": ">=5.7.1" }, "author": "CKSource (http://cksource.com/)", "license": "GPL-2.0-or-later", "homepage": "https://ckeditor.com/ckeditor-5", "bugs": "https://github.com/ckeditor/ckeditor5/issues", "repository": { "type": "git", "url": "https://github.com/ckeditor/ckeditor5.git", "directory": "packages/ckeditor5-build-classic" }, "scripts": { "build": "webpack --mode production", "start:dev": "webpack-dev-server", "preversion": "npm run build", "compile": "webpack --config webpack.config.js" }, "dependencies": { "webpack-dev-server": "^5.0.4" } }

[Q9-K]

@Q9-K Can you guide me how to run this package without duplicate module error

You mean ckeditor-vue or the ckeditor-math plugin? From my experience, ckeditor will throw duplicated modules error if there exists the same components with different version import: for example, if you use ckeditor-math and it says it depends on ckeditor 41.4.2, and you use the latest ckeditor-vue and it says it needs version 42+, then you will find the problem. So no matter what plugin you use, you should check the root directory's package.json. And if you use ckeditor as a local node_module which looks like link: or file: in package.json, you also need to check the local node_module's package.json. For ckeditor-vue, the offical version doesn't provide a version for 41+, so I just clone the source code and change it's package.json's version about ckeditor to 41.4.2, then build it and import as a local node_module for my project.

[iamgabrielsoft]

@Q9-K your solution isn't clear, which of the packages needs to be downgraded?

[Q9-K]

@Q9-K your solution isn't clear, which of the packages needs to be downgraded?

"dependencies": { "@ckeditor/ckeditor5-vue": "link:ckeditor5-vue", "ckeditor5-custom-build": "link:ckeditor5-super", },

This is my root project's dependencies. I use ckeditor5-vue and ckeditor5-super by building them as local node_modules.
In ckeditor5-vue, I do like this:
"dependencies": { "@ckeditor/ckeditor5-core": "41.4.2", "lodash-es": "^4.17.21" }, "devDependencies": { "@babel/core": "^7.17.7", "@ckeditor/ckeditor5-dev-bump-year": "^40.1.0", "@ckeditor/ckeditor5-dev-ci": "^40.1.0", "@ckeditor/ckeditor5-dev-release-tools": "^40.1.0", "@ckeditor/ckeditor5-dev-utils": "^40.1.0", "@types/lodash-es": "^4.17.6", "@vue/test-utils": "^2.3.1", "babel-loader": "^8.2.3", "babel-plugin-istanbul": "^6.1.0", "chai": "^4.3.6", "ckeditor5": "41.4.2", "coveralls": "^3.1.1", "eslint": "^7.32.0", "eslint-config-ckeditor5": "^5.3.2", "eslint-plugin-vue": "^9.9.0", "husky": "^8.0.2", "karma": "^6.3.17", "karma-chai": "^0.1.0", "karma-chrome-launcher": "^3.1.1", "karma-coverage": "^2.2.0", "karma-firefox-launcher": "^2.1.2", "karma-mocha": "^2.0.1", "karma-mocha-reporter": "^2.2.5", "karma-sinon": "^1.0.5", "karma-sourcemap-loader": "^0.3.8", "karma-webpack": "^5.0.0", "lint-staged": "^10.2.11", "listr2": "^6.5.0", "minimist": "^1.2.5", "mocha": "^9.2.2", "sinon": "^13.0.1", "terser-webpack-plugin": "^3.0.2", "ts-loader": "^9.4.2", "typescript": "^4.9.5", "vue": "^3.2.31", "vue-eslint-parser": "^9.1.0", "webpack": "^5.73.0", "webpack-cli": "^4.10.0" }
I changed the ckeditor5-* (dev)dependency's version to 41.4.2 or changed to the nearest version if there doesn't exist.
The ckeditor5-super's work is similar.
By the way, I use vite and if you build a local node_module using webpack, I configure my vite.config.js like this:
optimizeDeps: { include: ['ckeditor5-custom-build', '@ckeditor/ckeditor5-vue'] }, build: { commonjsOptions: { include: [/ckeditor5-super/, /ckeditor5-vue/, /node_modules/] } }