React Vite custom build - CKEditorError: e10 is null

[AngusParsonson]

📝 Provide detailed reproduction steps (if any)

1. Create custom build with the comment/track changes/upload docx plugin using: https://ckeditor.com/ckeditor-5/online-builder/
2. Create a Vite TypeScript React application: npm create vite test-ckeditor --template react-ts
3. Download and extract the custom ckeditor build next to node_modules and src folder
4. npm install ./ckeditor5
5. npm install --save @ckeditor/ckeditor5-react
6. npm run dev
7. Add license key to editor config
8. Add the following code to vite.config.ts

optimizeDeps: {
    include: ["ckeditor5-custom-build"],
},
build: {
    commonjsOptions: { exclude: ["ckeditor5-custom-build"], include: [] },
},

9. import Editor from "ckeditor5-custom-build"
10. Try and use comment/track changes/upload docx

✔️ Expected result

Comment plugin, upload docx, track changes should work.

❌ Actual result

Error:

CKEditorError: e10 is null
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-e10 is null
    ZS universalModuleDefinition:1
    xz universalModuleDefinition:1
    _createCommentThreadInputView universalModuleDefinition:1
    Lz universalModuleDefinition:1
    <anonymous> universalModuleDefinition:1
    zz universalModuleDefinition:1
    _createCommentThreadView universalModuleDefinition:1
    _attachCommentThread universalModuleDefinition:1
    attachTo universalModuleDefinition:1
    _addCommentThread universalModuleDefinition:1
    js universalModuleDefinition:1
    fire universalModuleDefinition:1
    addCommentThread universalModuleDefinition:1
    openNewCommentThread universalModuleDefinition:1
    js universalModuleDefinition:1
    i10 universalModuleDefinition:1
    fire universalModuleDefinition:1
    change universalModuleDefinition:1
    _disableRendering universalModuleDefinition:1
    Nk universalModuleDefinition:1
    fire universalModuleDefinition:1
    _runPendingChanges universalModuleDefinition:1
    change universalModuleDefinition:1
    execute universalModuleDefinition:1
    decorate universalModuleDefinition:1
    fire universalModuleDefinition:1
    t11 universalModuleDefinition:1
    js universalModuleDefinition:1
    fire universalModuleDefinition:1
    click universalModuleDefinition:1
    o10 universalModuleDefinition:1
    fire universalModuleDefinition:1
    e10 universalModuleDefinition:1
    attach universalModuleDefinition:1
    _addEventListener universalModuleDefinition:1
    tt universalModuleDefinition:1
    listenTo universalModuleDefinition:1
    listenTo universalModuleDefinition:1
    listenTo universalModuleDefinition:1
    activateDomEventListener universalModuleDefinition:1
    n10 universalModuleDefinition:1
    _setUpListeners universalModuleDefinition:1
    _renderElement universalModuleDefinition:1
    _renderNode universalModuleDefinition:1
    render universalModuleDefinition:1
    render universalModuleDefinition:1
    render universalModuleDefinition:1
    decorate universalModuleDefinition:1
    fire universalModuleDefinition:1
    t11 universalModuleDefinition:1
    _renderViewIntoCollectionParent universalModuleDefinition:1
    nC universalModuleDefinition:1
    fire universalModuleDefinition:1
    addMany universalModuleDefinition:1
    fillFromConfig universalModuleDefinition:1
    _initToolbar universalModuleDefinition:1
    init universalModuleDefinition:1
    create universalModuleDefinition:1
    promise callback*ckeditor5/build/ckeditor.js/</create/< universalModuleDefinition:1
    create universalModuleDefinition:1
    _createEditor ckeditor.tsx:188
    node_modules @ckeditor_ckeditor5-react.js:1018
    node_modules @ckeditor_ckeditor5-react.js:814
    promise callback*create editorwatchdog.js:116
    _initializeEditor ckeditor.tsx:174
    componentDidMount ckeditor.tsx:117
    React 7
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-UXIASGQL.js:8
    js index.js:6
    __require chunk-UXIASGQL.js:8
    React 2
    __require chunk-UXIASGQL.js:8
    js React
    __require chunk-UXIASGQL.js:8
    js React
    __require chunk-UXIASGQL.js:8
    <anonymous> react-dom_client.js:21603
 
Object { phase: "runtime", willEditorRestart: true }
ckeditor.tsx:170:12
    _initializeEditor ckeditor.tsx:170
    _fire watchdog.js:104
    _handleError watchdog.js:147
    _boundErrorHandler watchdog.js:53
    (Async: EventListener.handleEvent)
    _startErrorHandling watchdog.js:111
    create editorwatchdog.js:117
    (Async: promise callback)
    create editorwatchdog.js:116
    _initializeEditor ckeditor.tsx:174
    componentDidMount ckeditor.tsx:117
    React 7
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Async: EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-UXIASGQL.js:8
    js index.js:6
    __require chunk-UXIASGQL.js:8
    React 2
    __require chunk-UXIASGQL.js:8
    js React
    __require chunk-UXIASGQL.js:8
    js React
    __require chunk-UXIASGQL.js:8
    <anonymous> react-dom_client.js:21603

❓ Possible solution

If you have ideas, you can list them here. Otherwise, you can delete this section.

📃 Other details

• Browser: Firefox, safari (think it is unrelated to browser)
• OS: MacOS
• First affected CKEditor version: "@ckeditor/ckeditor5-react": "^6.1.0"
• Installed CKEditor plugins: DecoupledEditor,Alignment,Autoformat,Autosave,Bold, Italic,Strikethrough,Underline,BlockQuote,CloudServices,Comments,Essentials,ExportPdf,ExportWord,FindAndReplace,FontBackgoundColor, FontColor, FontFamily, FontSize,Heading,Highlight,Image, ImageCaption, ImageResize, ImageStyle,ImageToolbar,ImageUpload,ImportWord,Indent,ndentBlock,Link,DocumentList,MediaEmbed,PageBreak,Pagination,Paragraph,PasteFromOffice,Table,TableCellProperties,TableProperties,TableToolbar,Template,TrackChanges,TextTransformation, WordCount

---

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

[Reinmar]

Maybe related to #14084.

But there's something odd happening here – the error code seems to be obfuscated. It's possible that the obfuscator that we use became too greedy. We had to fine-tune its options in the past, AFAIR. Maybe we broke something upon recent repository migration. cc @ckeditor/ckeditor-5-devops 

The other thing to investigate is – what is that error and why it's happening.

[pomek]

It looks like the editor crashed after trying to restart itself.

Object { phase: "runtime", willEditorRestart: true }
ckeditor.tsx:170:12

...

CKEditorError: e10 is null
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-e10 is null
    ZS universalModuleDefinition:1
    xz universalModuleDefinition:1
    _createCommentThreadInputView universalModuleDefinition:1

Recent changes in the watchdog feature somehow impact here.

[Reinmar]

What about the error message?

[pomek]

My editor (IDE) found no obfuscated symbols from the stack trace. I installed all private packages listed in the Installed CKEditor plugins point in the latest version (v39.0.1).

I think it requires deeper analysis from somebody who knows what _createCommentThreadInputView() does.

[Reinmar]

I asked the CF team to look into this.

[Witoso]

A few things got me thinking (apart from the weird error leaking), and I wonder @AngusParsonson if these could be tested to unblock you:

1. [Online builder subfolder] I don't see the build step in your issue description, did you run webpack build?
2. [Alternate Vite experimental setup] We have an experimental plugin for CKEditor 5 and Vite, you could use it to not have a separate folder with CKE5. 
   1. One issue, doesn't work in the newest 39.0.1 setup (see Missing name global when scrolling ckeditor - header does not stick #14801, it will be fixed in the next release).

[AngusParsonson]

Thanks for all the responses.

@Witoso, by build step, do you mean explicitly running npm run build? I am using npm run dev currently. I also ran npm run build in the ckeditor5 directory. I assumed the npm install of the custom CKEditor build was not the issue, as the editor is working; it just seems those particular plugins throw the error.

I can give the experimental plugin a go, but as I said, most of the editor functionality appears to be working from my end; it's just those particular plugins, so I thought there might be a deeper issue at play here. Are you guys able to reproduce the errors?

Coincidentally it seems the features that break are all premium features, not sure if that is just a coincidence. My license key is valid (if I remove it, I get a license error).

[Witoso]

I am using npm run dev currently. I also ran npm run build in the ckeditor5 directory.
Okay, great!

most of the editor functionality appears to be working from my end;

Do I understand correctly that when you do use those plugins, everything works correctly? I haven't seen this in your description on GH, so double-checking.

One last thing, could you show the line with the Editor import?

[AngusParsonson]

Sorry if I wasn't clear. All of the regular plugins work e.g. I can highlight text, make it bold etc. But when I try to use comments, track changes, or upload docx I get the aforementioned error.

These are my imports:

import { useRef } from "react";
import Editor from "ckeditor5-custom-build";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import { DecoupledEditor } from "@ckeditor/ckeditor5-editor-decoupled";

[Reinmar]

This:

import Editor from "ckeditor5-custom-build";

Plus:

import { DecoupledEditor } from "@ckeditor/ckeditor5-editor-decoupled";

Should actually yield a duplicated modules error because both import paths contain the same modules (e.g. ckeditor5-utils) and we intentionally disallow this because it's evidence of an incorrect setup.

If a build is used it's meant to be the only "entry point" to the CKEditor 5 realm. All things should be bundled into that build and accessed via it.

So, I do wonder how it's possible that you don't see that error :O Maybe what you import from ckeditor5-custom-build isn't actually a bundle but it reexports the source of the build.

Any chance you could publish your setup? You got me curious :D

[AngusParsonson]

Hey @Reinmar, interesting. I think the docs for setting up a React/TypeScript/Vite project with an online build are out of date, I did have to do a few workarounds, perhaps I've messed it up somewhere.

Here is a minimal reproduction: https://github.com/AngusParsonson/CKEditorDemo

Notable changes are in App.tsx, index.css, and vite.config.ts

I use that DecoupledEditor import so that I have access to the TypeScript editor type.

[pomek]

Hey @AngusParsonson,

I was able to reproduce the issue you mentioned. In your editor, I didn't find the integration with the Users plugin.

The plugin is loaded, but it needs to be configured manually:

• A list of available users must be defined

   editor.plugins.get( 'Users' ).addUser( {
   	id: 'user-1',
   	name: 'Mex Haddox'
   } );

• Then, you need to set the current user (who uses the editor)

   editor.plugins.get( 'Users' ).defineMe( 'user-1' );

Otherwise, when creating a new suggestion (track changes) or adding a new comment, the editor does not know the change's author and emits an error.

Please follow the Integrating comments with your application guide to read more about the comments integration.

[Reinmar]

Thanks @pomek and @psmyrek!

Do you see an option to improve the error that was thrown? Is the e10 some kind of obfuscated function name? Why does an error contain just it?

[pomek]

This error must come from the minified code. I had a readable stack trace when I skipped using Vite in the example app.

[AngusParsonson]

@pomek Is it possible for me to see the unminified errors? I am also getting an error for the import word plugin

Uncaught (in promise) TypeError: t3 is null

I think it is something to do with my tokenUrl

EDIT: I'm actually getting t3 is null elsewhere as well, would be really great if there was a way for me to actually see the error message.

[pomek]

I can speak only for the CKEditor 5 project. You can rebuild the build produced by Online Builder. Please comment out the Terser plugin and run webpack in the development mode.

To disable/remove:

https://github.com/AngusParsonson/CKEditorDemo/blob/6c484140c69bea7aa2d8c80dc9cc83ffb4bbf7a8/test-ckeditor/ckeditor5/webpack.config.js#L34-L43

To add in the configuration:

mode: development

Them, npm/yarn install in the ckeditor5 directory to install the required stuff. Then, npm/yarn run build.

As for the React app, I am not an expert so I would search in the Vite docs or StackOverflow for related topics.

Ultimately, you can skip using any framework for testing purposes and build a simple HTML page containing the editor only on your own.

[Reinmar]

OK, so to conclude:

• The issue was caused by an incorrect integration code.
• The error was cryptic due to Vite's default to minify the code.