v42 - Vite dev build fails using Yarn PnP

[greggmoritz]

📝 Provide detailed reproduction steps (if any)

1. Upgrade to CKEditor5 v42 per instructions on https://ckeditor.com/docs/ckeditor5/latest/updating/nim-migration/predefined-builds.html (using CKEditor component from @ckeditor/ckeditor5-react)
2. Run vite dev build

✔️ Expected result

Vite dev builds/runs successfully

❌ Actual result

Vite dev build failed with 168 instances of the same error, but with different instances. Below is an example of just one instance of the error in the CLI output

[0]   VITE v5.3.0  ready in 1186 ms
[0]
[0]   ➜  Local:   http://localhost:3100/subdirectory
[0]   ➜  Network: use --host to expose
[0] ✘ [ERROR] Could not resolve "@ckeditor/ckeditor5-ui/dist/index.js"
[0]
[0]     ../.yarn/cache/@ckeditor-ckeditor5-alignment-npm-42.0.0-7db2aabb44-ad212925b0.zip/node_modules/@ckeditor/ckeditor5-alignment/dist/index.js:7:159:
[0]       7 │ ...nuListItemButtonView } from '@ckeditor/ckeditor5-ui/dist/index.js';
[0]         ╵                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[0]
[0]   The Yarn Plug'n'Play manifest forbids importing "@ckeditor/ckeditor5-ui" here because it's not listed as a dependency of this package:
[0]
[0]     ../.pnp.cjs:2831:31:
[0]       2831 │         "packageDependencies": [\
[0]            ╵                                ~~
[0]
[0]   You can mark the path "@ckeditor/ckeditor5-ui/dist/index.js" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.
[0]
[0] /path/to/yarncache/.yarn/unplugged/esbuild-npm-0.21.5-d85dfbc965/node_modules/esbuild/lib/main.js:1472
[0]   let error = new Error(text);
[0]               ^
[0]
[0] Error: Build failed with 1 error:
[0] ../.yarn/cache/@ckeditor-ckeditor5-alignment-npm-42.0.0-7db2aabb44-ad212925b0.zip/node_modules/@ckeditor/ckeditor5-alignment/dist/index.js:7:159: ERROR: Could not resolve "@ckeditor/ckeditor5-ui/dist/index.js"
[0]     at failureErrorWithLog (/path/to/yarncache/.yarn/unplugged/esbuild-npm-0.21.5-d85dfbc965/node_modules/esbuild/lib/main.js:1472:15)
[0]     at /path/to/yarncache/.yarn/unplugged/esbuild-npm-0.21.5-d85dfbc965/node_modules/esbuild/lib/main.js:945:25
[0]     at /path/to/yarncache/.yarn/unplugged/esbuild-npm-0.21.5-d85dfbc965/node_modules/esbuild/lib/main.js:1353:9
[0]     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
[0]   errors: [Getter/Setter],
[0]   warnings: [Getter/Setter]
[0] }

❓ Possible solution

I was able to resolve the build issue on my end by making use of Yarn's packageExtensions config option, which is meant as an escape hatch for "packages {that] may have been specified incorrectly with regard to their dependencies".

I'm filing this issue because it's likely that there's some dependency misconfiguration that other package managers or installation strategies are less strict about.

For your reference (and for anyone else experiencing the same issue), here is the config that got rid of all of the build errors and the app running as expected:

# .yarnrc.yml
packageExtensions:
  '@ckeditor/ckeditor5-adapter-ckfinder@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-upload': '*'
  '@ckeditor/ckeditor5-alignment@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-ui': '*'
  '@ckeditor/ckeditor5-autosave@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-autoformat@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-basic-styles@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
  '@ckeditor/ckeditor5-block-quote@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-enter': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-ckbox@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-upload': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-ckfinder@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-markdown-gfm@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
  '@ckeditor/ckeditor5-cloud-services@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-code-block@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-enter': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-easy-image@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-upload': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-editor-balloon@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-editor-classic@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-editor-decoupled@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-editor-inline@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-editor-multi-root@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-essentials@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-enter': '*'
      '@ckeditor/ckeditor5-select-all': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-undo': '*'
  '@ckeditor/ckeditor5-find-and-replace@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-font@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-heading@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-paragraph': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-highlight@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
  '@ckeditor/ckeditor5-horizontal-line@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-html-embed@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-html-support@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-enter': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-image@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-undo': '*'
      '@ckeditor/ckeditor5-upload': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-indent@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-language@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-link@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-list@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-enter': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-mention@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-media-embed@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-undo': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-minimap@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-page-break@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-paste-from-office@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
  '@ckeditor/ckeditor5-remove-format@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-restricted-editing@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-show-blocks@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
  '@ckeditor/ckeditor5-source-editing@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-special-characters@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-style@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-typing': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'
  '@ckeditor/ckeditor5-table@*':
    dependencies:
      '@ckeditor/ckeditor5-clipboard': '*'
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-engine': '*'
      '@ckeditor/ckeditor5-utils': '*'
      '@ckeditor/ckeditor5-widget': '*'
  '@ckeditor/ckeditor5-word-count@*':
    dependencies:
      '@ckeditor/ckeditor5-core': '*'
      '@ckeditor/ckeditor5-ui': '*'
      '@ckeditor/ckeditor5-utils': '*'

📃 Other details

Development Environment:

• Yarn 4.30 using Yarn Plug'n'Play (pnp)

• Vite 5.3.0

• React 18.3.1

• Browser: Chrome (NA)

• OS: macOs Sonoma 14.5

• First affected CKEditor version: v42.0.0

• Installed CKEditor plugins:

---

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

[filipsobol]

Most of our packages have ckeditor5 as the only dependency, because it has all the other open-source packages in its dependencies, which is correct. However, it seems that Yarn PnP requires all used dependencies to be defined directly in the package that uses them, rather than indirectly through the dependencies of a dependency.

I have created a few PRs to fix this, and will discuss this with the team, as it will require some changes to the internal tooling.

[Reinmar]

Out of curiosity: Why has it surfaced now? We didn't have those deps listed there for years now. Is it related to NIM or it was always a problem?

[filipsobol]

It's related to new installation methods (NIM). During the build process, some of the imports are rewritten to make code written for old installation methods work with NIM. For example:

// This import ...
import { Plugin } from 'ckeditor5/src/core.js';
//                      ^^^^^^^^^

// ... will be replaced with.
import { Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
//                      ^^^^^^^^^^^^^^^^^^^^^^^^

Before the changes, the only direct dependency of most packages was the ckeditor5 package. We didn't change this because ckeditor5 has all of our open-source packages as its dependencies anyway. However, as I described in my previous message, this is not enough for Yarn PnP.

[filipsobol]

This problem has been fixed in 42.0.2.