🧩 Missing imports after update to v42.0.0+

Witoso commented 1 month ago

Missing imports

We've received reports on our GitHub issue tracker (e.g., issue #17207) about missing code imports after upgrading to CKEditor 5 version 42.0.0 or higher. These issues mainly affect integrators who noticed that certain classes and utilities used for custom plugins and integrations are no longer available for import.

Depending on the integration method, the errors may look different but importing the missing item will always fail in the runtime:

import { LINK_KEYSTROKE } from 'ckeditor5';

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/ckeditor5.js?v=635e45a4' does not provide an export named 'LINK_KEYSTROKE'

This situation is partly due to the migration to TypeScript in version 37.0.0, which introduced import indexes, along with recent changes to installation methods. While these updates aim to simplify CKEditor 5 integration, they have caused some unintended issues for existing setups.

What are we doing about it?

We are actively working to address this problem, and we review each request for imports and decide if it should be part of the public API of the editor.
Historically, the editor exposed many internal functions because we provided access to almost all source code. This meant that any function shared across files could be treated as a public API.
If it's an obvious case, we add the missing export to the indexes right away.
If we decide not to export a function, we will explain why and provide any possible workarounds (in some cases, better alternatives may be available).
We are also working on updating our API documentation. Over the next few months, we plan to improve its organization and make it more consistent with the new installation methods.

What can I do as an integrator?

If you encounter missing imports, please open an issue on our bug tracker listing the imports you need.
- Providing information on how you use these imports and why they are essential will help us understand your needs and shape our API accordingly.
- Licensed CKEditor 5 users can contact us directly for assistance.
For simple public utilities and types, you may temporarily copy them directly from the editor's source code. Use GitHub's search functionality to locate them in the codebase.

We appreciate your patience as we address these issues and improve the experience for everyone.

stonebk commented 1 month ago

I recently tried to upgrade from the 41.3.0-alpha releases to version 43.2.0. Everything seems to work fine except for my tests where it cannot find the ckeditor5 module:

 FAIL   @ms/yammer-publisher-components  src/RichTextEditor/RichTextEditor.spec.tsx
  ● Test suite failed to run

    Cannot find module 'ckeditor5' from 'src/editor/HeadlessEditor.ts'

    Require stack:
      src/editor/HeadlessEditor.ts
      src/RichTextEditor/RichTextEditor.tsx
      src/RichTextEditor/RichTextEditor.spec.tsx

    > 1 | import { Autoformat, DecoupledEditor, EditorConfig, Essentials, Paragraph } from 'ckeditor5';
        | ^
      2 |

      at Resolver._throwModNotFoundError (../../../common/temp/node_modules/.pnpm/jest-resolve@29.7.0/node_modules/jest-resolve/build/resolver.js:427:11)
      at Object.require (src/editor/HeadlessEditor.ts:1:1)
      at Object.require (src/RichTextEditor/RichTextEditor.tsx:4:1)
      at Object.require (src/RichTextEditor/RichTextEditor.spec.tsx:8:1)

Does this sound like a related issue?

filipsobol commented 1 month ago

@stonebk I can't think of any change that would cause this. Could you try reinstalling the dependencies?

Witoso commented 1 month ago

Looks like jest (jest-resolver) cannot properly find the package. Which is weird because we are a standard ESM. A quick internet search showed clearing cache jest --clearCache, or using explicit config:

module.exports = {
  // Existing config...
  moduleNameMapper: {
    '^ckeditor5$': '<rootDir>/path/to/ckeditor',
  },
};

But the above looks weird...

stonebk commented 1 month ago

@stonebk I can't think of any change that would cause this. Could you try reinstalling the dependencies?

The dependencies are definitely there -- the code runs great outside of jest. I can try playing around with moduleNameMapper as @Witoso suggests. --clearCache didn't help.

This could very well be an issue specific to our setup. We're using rush and pnpm. We were wondering if pnpm's flat store has something to do with it.

stonebk commented 1 month ago

Thank you @Witoso, this appears to work:

  moduleNameMapper: {
    '^ckeditor5$': '<rootDir>/node_modules/ckeditor5/dist/ckeditor5.js',
  },

stefanseeger commented 3 weeks ago

Worked for me as well. I would appreciate if someone could update the guides below accordingly

Witoso commented 3 weeks ago

I would really appreciate it if someone could share a minimal reproducible sample for us, with jest version, etc. Before we start updating the docs, it would be great to understand the issue and describe it better.

stefanseeger commented 3 weeks ago

Hi @Witoso here you go https://github.com/stefanseeger/ckeditor5-43.3-jest-broken

amitjangid12 commented 1 week ago

If we use the latest versions of the following packages with CKEditor 5's new installation method: ckeditor5 v43.3.1 ckeditor5-react v9.3.1 @wiris/mathtype-ckeditor5 v8.11.1 these errors occurs when we use wiris mathtype - below error screenshot and errors https://v2res1-stag.assessprep.com/direct_uploads/attachments/01JD1FY4DCA0HS6JAR2KD57JZ4/image.png

Uncaught CKEditorError: Cannot read properties of undefined (reading 'trim') Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of undefined (reading 'trim') at HtmlDataProcessor._toDom (chunk-ELVVGUN6.js?v=7bf6d07f:24121:61) at HtmlDataProcessor.toView (chunk-ELVVGUN6.js?v=7bf6d07f:24085:30) at createDataString (@wiris_mathtype-cked…v=7bf6d07f:10730:51) at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20129:25) at DowncastDispatcher.fire (chunk-ELVVGUN6.js?v=7bf6d07f:584:35) at DowncastDispatcher._testAndFire (chunk-ELVVGUN6.js?v=7bf6d07f:17531:10) at DowncastDispatcher._convertInsert (chunk-ELVVGUN6.js?v=7bf6d07f:17321:12) at Object.convertItem (chunk-ELVVGUN6.js?v=7bf6d07f:17567:35) at reinsertOrConvertNodes (chunk-ELVVGUN6.js?v=7bf6d07f:20814:21) at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20138:5)

Uncaught (in promise) CKEditorError: editor-source-element-already-used Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-editor-source-element-already-used at secureSourceElement (chunk-ELVVGUN6.js?v=7bf6d07f:37929:11) at new InlineEditor (ckeditor5.js?v=7bf6d07f:9922:7) at ckeditor5.js?v=7bf6d07f:10040:22 at new Promise () at InlineEditor.create (ckeditor5.js?v=7bf6d07f:10036:12) at CKEditor._createEditor (@ckeditor_ckeditor5-react.js?v=7bf6d07f:1062:30) at EditorWatchdog._creator (@ckeditor_ckeditor5-react.js?v=7bf6d07f:1023:35) at chunk-ELVVGUN6.js?v=7bf6d07f:35318:19

An error happened during the editor destroying. CKEditorError: Cannot read properties of undefined (reading 'trim') Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-Cannot read properties of undefined (reading 'trim') at HtmlDataProcessor._toDom (chunk-ELVVGUN6.js?v=7bf6d07f:24121:61) at HtmlDataProcessor.toView (chunk-ELVVGUN6.js?v=7bf6d07f:24085:30) at createDataString (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:10730:51) at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20129:25) at DowncastDispatcher.fire (chunk-ELVVGUN6.js?v=7bf6d07f:584:35) at DowncastDispatcher._testAndFire (chunk-ELVVGUN6.js?v=7bf6d07f:17531:10) at DowncastDispatcher._convertInsert (chunk-ELVVGUN6.js?v=7bf6d07f:17321:12) at Object.convertItem (chunk-ELVVGUN6.js?v=7bf6d07f:17567:35) at reinsertOrConvertNodes (chunk-ELVVGUN6.js?v=7bf6d07f:20814:21) at DowncastDispatcher. (chunk-ELVVGUN6.js?v=7bf6d07f:20138:5)

And we open, insert and close wiris modal then- Error tracking OPENED_MTCT_EDITOR TypeError: Cannot read properties of undefined (reading 'track') at _ContentManager.onOpen (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7124:28) at ModalDialog.open (@wiris_mathtype-ckeditor5_dist_indexjs.js?v=7bf6d07f:7975:27) at _Core.openModalDialog (@wiris_mathtype-ckeditor5_dist_indexjs.js?v=7bf6d07f:9423:22)

Error tracking INSERTED_FORMULA TypeError: Cannot read properties of undefined (reading 'track') at CKEditor5Integration.insertFormula (@wiris_mathtype-cked…v=7bf6d07f:10298:28) at CKEditor5Integration.updateFormula (@wiris_mathtype-cked…?v=7bf6d07f:9850:16)

Error tracking CLOSED_MTCT_EDITOR TypeError: Cannot read properties of undefined (reading 'track') at ModalDialog.close (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7995:36) at ModalDialog.submitAction (@wiris_mathtype-ckeditor5_dist_index__js.js?v=7bf6d07f:7794:16)

ckeditor / ckeditor5