ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

đź§© Missing imports after update to v42.0.0+

Open Witoso opened this issue 1 year ago • 10 comments

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.

Witoso avatar Oct 21 '24 09:10 Witoso

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/[email protected]/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?

stonebk avatar Oct 24 '24 00:10 stonebk

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

filipsobol avatar Oct 24 '24 09:10 filipsobol

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...

Witoso avatar Oct 24 '24 16:10 Witoso

@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 avatar Oct 24 '24 16:10 stonebk

Thank you @Witoso, this appears to work:

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

stonebk avatar Oct 24 '24 17:10 stonebk

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

  • https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react.html#jest-testing
  • https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/vuejs-v3.html#jest-testing
  • https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/angular.html#jest-testing

stefanseeger avatar Nov 06 '24 15:11 stefanseeger

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.

Witoso avatar Nov 06 '24 16:11 Witoso

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

stefanseeger avatar Nov 06 '24 16:11 stefanseeger

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_index__js.js?v=7bf6d07f:7975:27) at _Core.openModalDialog (@wiris_mathtype-ckeditor5_dist_index__js.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)

amitjangid12 avatar Nov 19 '24 07:11 amitjangid12

We've created a ticket in which we're going to tackle the exports: #18583.

arkflpc avatar May 30 '25 09:05 arkflpc

This issue is now resolved in the v46.0.0 release. If we missed anything, please create a new issue.

Witoso avatar Jul 21 '25 13:07 Witoso