Error on installing the package after customizing/building it

mssayari commented 1 year ago

Hi,

I've tried to add a manual link to the popup and build the package again. I didn't have any problem with building it but since I use CkEditor Custom Build, after adding it to the project I'm getting below error on npm install. Does anyone know what could be the problem?

npm ERR! code 1
npm ERR! path /var/www/html/packages/ckeditor5-math
npm ERR! command failed
npm ERR! command sh -c yarn run dll:build
npm ERR! yarn run v1.22.19
npm ERR! $ ckeditor5-package-tools dll:build
npm ERR! info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm ERR! node:internal/modules/cjs/loader:1080
npm ERR!   throw err;
npm ERR!   ^
npm ERR! 
npm ERR! Error: Cannot find module '/var/www/html/packages/ckeditor5-math/node_modules/ckeditor5/build/ckeditor5-dll.manifest.json'
npm ERR! Require stack:
npm ERR! - /var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js
npm ERR! - /var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/tasks/dll-build.js
npm ERR! - /var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/index.js
npm ERR! - /var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/bin/index.js
npm ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
npm ERR!     at Module._load (node:internal/modules/cjs/loader:922:27)
npm ERR!     at Module.require (node:internal/modules/cjs/loader:1143:19)
npm ERR!     at require (node:internal/modules/cjs/helpers:110:18)
npm ERR!     at module.exports (/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js:38:14)
npm ERR!     at module.exports (/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/tasks/dll-build.js:12:24)
npm ERR!     at dll:build (/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/index.js:18:45)
npm ERR!     at Object.<anonymous> (/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/bin/index.js:18:32)
npm ERR!     at Module._compile (node:internal/modules/cjs/loader:1256:14)
npm ERR!     at Module._extensions..js (node:internal/modules/cjs/loader:1310:10) {
npm ERR!   code: 'MODULE_NOT_FOUND',
npm ERR!   requireStack: [
npm ERR!     '/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/utils/get-webpack-config-dll.js',
npm ERR!     '/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/tasks/dll-build.js',
npm ERR!     '/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/lib/index.js',
npm ERR!     '/var/www/html/node_modules/@ckeditor/ckeditor5-package-tools/bin/index.js'
npm ERR!   ]
npm ERR! }
npm ERR! 
npm ERR! Node.js v18.17.0
npm ERR! error Command failed with exit code 1.

BWT, I the ckeditor5-dll.manifest.json file exists in the path.

tony commented 1 year ago

Do you know the versions of the package?

npm why ckeditor5-math

npm why ckeditor5

Does the CKEditor5 version match the CKEditor5-math one?

mssayari commented 1 year ago

Yeah, I'm using version 36 for both.

ckeditor5@36.0.1 dev
node_modules/ckeditor5
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-autoformat@36.0.1
  node_modules/@ckeditor/ckeditor5-autoformat
    dev @ckeditor/ckeditor5-autoformat@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-basic-styles@36.0.1
  node_modules/@ckeditor/ckeditor5-basic-styles
    dev @ckeditor/ckeditor5-basic-styles@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-block-quote@36.0.1
  node_modules/@ckeditor/ckeditor5-block-quote
    dev @ckeditor/ckeditor5-block-quote@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-alignment@36.0.1
  node_modules/@ckeditor/ckeditor5-alignment
    dev @ckeditor/ckeditor5-alignment@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-editor-inline@36.0.1
  node_modules/@ckeditor/ckeditor5-editor-inline
    dev @ckeditor/ckeditor5-editor-inline@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-code-block@36.0.1
  node_modules/@ckeditor/ckeditor5-code-block
    dev @ckeditor/ckeditor5-code-block@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-essentials@36.0.1
  node_modules/@ckeditor/ckeditor5-essentials
    dev @ckeditor/ckeditor5-essentials@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-font@36.0.1
  node_modules/@ckeditor/ckeditor5-font
    dev @ckeditor/ckeditor5-font@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-heading@36.0.1
  node_modules/@ckeditor/ckeditor5-heading
    dev @ckeditor/ckeditor5-heading@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-horizontal-line@36.0.1
  node_modules/@ckeditor/ckeditor5-horizontal-line
    dev @ckeditor/ckeditor5-horizontal-line@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-indent@36.0.1
  node_modules/@ckeditor/ckeditor5-indent
    dev @ckeditor/ckeditor5-indent@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-html-support@36.0.1
  node_modules/@ckeditor/ckeditor5-html-support
    dev @ckeditor/ckeditor5-html-support@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-link@36.0.1
  node_modules/@ckeditor/ckeditor5-link
    dev @ckeditor/ckeditor5-link@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-image@36.0.1
  node_modules/@ckeditor/ckeditor5-image
    dev @ckeditor/ckeditor5-image@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-list@36.0.1
  node_modules/@ckeditor/ckeditor5-list
    dev @ckeditor/ckeditor5-list@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-markdown-gfm@36.0.1
  node_modules/@ckeditor/ckeditor5-markdown-gfm
    dev @ckeditor/ckeditor5-markdown-gfm@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-media-embed@36.0.1
  node_modules/@ckeditor/ckeditor5-media-embed
    dev @ckeditor/ckeditor5-media-embed@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-mention@36.0.1
  node_modules/@ckeditor/ckeditor5-mention
    dev @ckeditor/ckeditor5-mention@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-paste-from-office@36.0.1
  node_modules/@ckeditor/ckeditor5-paste-from-office
    dev @ckeditor/ckeditor5-paste-from-office@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-remove-format@36.0.1
  node_modules/@ckeditor/ckeditor5-remove-format
    dev @ckeditor/ckeditor5-remove-format@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-table@36.0.1
  node_modules/@ckeditor/ckeditor5-table
    dev @ckeditor/ckeditor5-table@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @ckeditor/ckeditor5-special-characters@36.0.1
  node_modules/@ckeditor/ckeditor5-special-characters
    dev @ckeditor/ckeditor5-special-characters@"^36.0.0" from the root project
  ckeditor5@"^36.0.1" from @isaul32/ckeditor5-math@36.0.7
  node_modules/@isaul32/ckeditor5-math
    dev @isaul32/ckeditor5-math@"^36.0.0" from the root project

This is my packages.json

{
    "name": "ckeditor5-custom-build",
    "author": "CKSource",
    "description": "A custom CKEditor 5 build made by the CKEditor 5 online builder.",
    "version": "0.1.8",
    "license": "SEE LICENSE IN LICENSE.md",
    "private": true,
    "main": "./build/ckeditor.js",
    "devDependencies": {
        "@ckeditor/ckeditor5-alignment": "^36.0.0",
        "@ckeditor/ckeditor5-autoformat": "^36.0.0",
        "@ckeditor/ckeditor5-basic-styles": "^36.0.0",
        "@ckeditor/ckeditor5-block-quote": "^36.0.0",
        "@ckeditor/ckeditor5-code-block": "^36.0.0",
        "@ckeditor/ckeditor5-dev-translations": "^32.1.2",
        "@ckeditor/ckeditor5-dev-utils": "^32.1.2",
        "@ckeditor/ckeditor5-editor-inline": "^36.0.0",
        "@ckeditor/ckeditor5-essentials": "^36.0.0",
        "@ckeditor/ckeditor5-font": "^36.0.0",
        "@ckeditor/ckeditor5-heading": "^36.0.0",
        "@ckeditor/ckeditor5-horizontal-line": "^36.0.0",
        "@ckeditor/ckeditor5-html-support": "^36.0.0",
        "@ckeditor/ckeditor5-image": "^36.0.0",
        "@ckeditor/ckeditor5-indent": "^36.0.0",
        "@ckeditor/ckeditor5-link": "^36.0.0",
        "@ckeditor/ckeditor5-list": "^36.0.0",
        "@ckeditor/ckeditor5-markdown-gfm": "^36.0.0",
        "@ckeditor/ckeditor5-media-embed": "^36.0.0",
        "@ckeditor/ckeditor5-mention": "^36.0.0",
        "@ckeditor/ckeditor5-paragraph": "^36.0.0",
        "@ckeditor/ckeditor5-paste-from-office": "^36.0.0",
        "@ckeditor/ckeditor5-remove-format": "^36.0.0",
        "@ckeditor/ckeditor5-special-characters": "^36.0.0",
        "@ckeditor/ckeditor5-table": "^36.0.0",
        "@ckeditor/ckeditor5-theme-lark": "^36.0.0",
        "@ckeditor/ckeditor5-upload": "^36.0.0",
        "@isaul32/ckeditor5-math": file:packages/ckeditor5-math,
        "css-loader": "^5.2.7",
        "postcss": "^8.4.20",
        "postcss-loader": "^4.3.0",
        "raw-loader": "^4.0.2",
        "style-loader": "^2.0.0",
        "terser-webpack-plugin": "^4.2.3",
        "webpack": "^5.58.1",
        "webpack-cli": "^4.10.0"
    },
    "scripts": {
        "build": "webpack --mode production"
    },
    "dependencies": {
        "i": "^0.3.7",
        "mini-css-extract-plugin": "^2.7.2",
        "npm": "^10.1.0"
    }
}

tony commented 1 year ago

I can't diagnose remotely or fix the problem for you, but some troubleshooting:

I'm a bit confused by this (in your package.json):

 "@isaul32/ckeditor5-math": file:packages/ckeditor5-math,

Is there something different about your setup?

Judging by the error, it's not mentioning ckeditor duplicated modules (which would only show on runtime). But having package versions match is still important of course.

The latest ckeditor5-math release for CKEditor v36.0.1 is https://github.com/isaul32/ckeditor5-math/tree/v36.0.7
The current ckeditor5-math release is 40.1.0 (for CKEditor 40.1.0)

mssayari commented 1 year ago

I'm using a custom build of CKEditor 36.0.1 on a project written in Vue3 and Vite. Since CKEditor didn't support Vite, I cloned it and built it with Webpack. Then, I used the new package in my Vite project locally like this:

"ckeditor5-custom-build": "file:packages/custom-editor-build"

I was using ckeditor5-math without any problem, but since it doesn't have a manual for syntax, I cloned version 36.0.7 and made a small change (added a Katex supported functions page link), then used it in the CKEditor:

"@isaul32/ckeditor5-math": "file:../ckeditor5-math"

When I build both ckeditor5-math and CKEditor separately, I don't get any errors. However, when I build my main project, it returns the above error. At first, I thought the problem was related to my changes in ckeditor5-math, but I'm also getting the same error while building the original cloned version of ckeditor5-math. It only happens when I use the locally cloned version to build!

it happens when my final build runs the dll:build of the ckeditor5-math.

So, I'm not sure what the problem is. I've spent a day trying to fix it but haven't had any luck!

tony commented 1 year ago

This seems more like general tech support to me and repeat I can't fix the problem for you.

Here is what I would do:

node --version
I see you are using npm. I advise using yarn classic (v1)

CKEditor's documentation used to recommend yarn due to issues with npm, but I can't find where (maybe they removed it)
Consider switching out file: with the real package versions to see if the root cause is file: hookups and how that impacts the build system.
Updating CKEditor to the latest (40.1.0)

That way you can also enjoy ckeditor5-math's updates, such as v38.1.0 which updates ckeditor5-package-tools.

mssayari commented 6 months ago

Finally, I was able to solve this problem. The reason I was getting the error was that I was building ckeditor5-math and then trying to build my custom-editor-build.

It seems that I shouldn't build ckeditor5-math separately. Instead, I had to add it to the custom-editor-build and then build the custom-editor-build. I'm leaving this here in case somebody else faces this problem and it could save their time.

tony commented 6 months ago

@mssayari Good this was resolved! Thank you providing the additional explanation as well in case anyone else runs into this issue.

isaul32 / ckeditor5-math

Error on installing the package after customizing/building it #118