ckeditorerror.js:65 Uncaught (in promise) TypeError: Cannot read property 'default' of undefined

[phongyewtong]

Got this error after uploading the image to my firebase server. the image is uploaded but the return request seem to be broken?

Uncaught (in promise) TypeError: Cannot read property 'default' of undefined
    at Object.callback (imageuploadediting.js:242)
    at Model._runPendingChanges (model.js:836)
    at Model.enqueueChange (model.js:233)
    at imageuploadediting.js:239

📝 Provide detailed reproduction steps (if any)

1. Press on image uploaded
2. Click on image you want to upload
3. When image is uploaded on the server, the error appear.

✔️ Expected result

Image uploaded without any error onto my own firebase server.

❌ Actual result

Image uploaded WITH return error onto own firebase server.

📃 Other details

code:

import React, { Component, Fragment, useEffect, useContext, useState } from 'react';

import FBStorage from '../../firebase/storage';
import { UserContext } from "../../firebase/user";

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat.js';
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold.js';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials.js';
import Heading from '@ckeditor/ckeditor5-heading/src/heading.js';
import Image from '@ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload.js';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '@ckeditor/ckeditor5-link/src/link.js';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation.js';

const TEditor = ({onEditorStateChange, defaultValue}) => {
  const { currentUser } = useContext(UserContext);
  const [editorConfig , setEditorConfig] = useState(null);

  useEffect(()=> {
    loadSettting()
  }, [])

  const loadSettting = async () => {
    const token = await currentUser.getIdToken()
    console.log(token)

    setEditorConfig({
      plugins: [
        Alignment,
        Autoformat,
        SimpleUploadAdapter,
        BlockQuote,
        Bold,
        Essentials,
        Heading,
        Image,
        ImageCaption,
        ImageResize,
        ImageStyle,
        ImageToolbar,
        ImageUpload,
        Italic,
        Link,
        PasteFromOffice,
        TextTransformation
      ],
      toolbar: [
        'heading',
        '|',
        'bold',
        'italic',
        'link',
        'bulletedList',
        'numberedList',
        '|',
        'imageUpload',
        'blockQuote',
        'undo',
        'redo'
      ],
      language: 'en',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:full',
          'imageStyle:side'
        ]
      },
      simpleUpload: {
        // The URL that the images are uploaded to.
        uploadUrl: 'https://firebasestorage.googleapis.com/v0/b/bucketname.appspot.com/o/images',

        // Enable the XMLHttpRequest.withCredentials property.
        withCredentials: false,

        // Headers sent along with the XMLHttpRequest to the upload server.
        headers: {
            Authorization: 'Bearer ' + token
        },
      }
    })
  };

  const onChange = (event, editor ) => {
    const data = editor.getData();
    console.log(  data  );
    onEditorStateChange(data)
  };

  const onBlur = (event, editor) => {
    console.log( 'Blur.', editor );
  };

  const onFocus = (event, editor) => {
    // editor.config.simpleUpload.headers.Authorization = 'Bearer ' + idToken
    console.log( 'Focus.', editor );
  };

  const onInit = (editor) => {
    // editor
    // You can store the "editor" and use when it is needed.
    console.log( 'Editor is ready to use!', editor );
    // editor.config.simpleUpload.headers.Authorization = 'Bearer ' + idToken
    // ClassicEditor.builtinPlugins.map( plugin => console.log(plugin.pluginName) );
    // editor.setEditorConfig()
  };

  return (
      <div className="editor">
          {/* <h2>Using CKEditor 5 build in React</h2> */}
          { editorConfig ?
            <CKEditor
                editor={ClassicEditor}
                config={editorConfig}
                data={defaultValue ? defaultValue : ""}
                onInit={onInit}
                onChange={onChange}
                onBlur={onBlur}
                onFocus={onFocus}
            />
            : "loading"
          }
      </div>
  );
}

export default TEditor;

package.json

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^5.6.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "availity-reactstrap-validation": "^2.6.0",
    "bootstrap": "^4.3.1",
    "chalk": "^2.4.1",
    "chart.js": "^2.8.0",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "rc-time-picker": "^3.7.3",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.9",
    "react-chartjs": "^1.2.0",
    "react-chartjs-2": "^2.7.6",
    "react-countup": "^4.2.0",
    "react-data-grid": "^6.1.0",
    "react-datepicker": "^2.8.0",
    "react-dom": "^16.8.6",
    "react-dropzone": "^10.2.2",
    "react-dropzone-uploader": "^2.10.1",
    "react-feather": "^2.0.3",
    "react-fontawesome": "^1.6.1",
    "react-google-charts": "^3.0.14",
    "react-images-upload": "^1.2.7",
    "react-redux": "^7.1.0",
    "react-responsive-modal": "^4.0.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-router-scroll-4": "^1.0.0-beta.2",
    "react-scripts": "^3.0.1",
    "react-select": "^3.1.0",
    "react-slick": "^0.24.0",
    "react-smart-data-table": "^0.7.1",
    "react-spinners": "^0.9.0",
    "react-star-rating-component": "^1.4.1",
    "react-switch": "^5.0.1",
    "react-table-6": "^6.11.0",
    "react-tabs": "^3.0.0",
    "react-toastify": "^5.3.2",
    "reactstrap": "^8.0.1",
    "slick-carousel": "^1.8.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-transform-react-jsx": "^7.10.4",
    "@babel/plugin-transform-react-jsx-self": "^7.10.4",
    "@ckeditor/ckeditor5-alignment": "^21.0.0",
    "@ckeditor/ckeditor5-autoformat": "^21.0.0",
    "@ckeditor/ckeditor5-basic-styles": "^21.0.0",
    "@ckeditor/ckeditor5-block-quote": "^21.0.0",
    "@ckeditor/ckeditor5-dev-utils": "^23.1.1",
    "@ckeditor/ckeditor5-editor-classic": "^21.0.0",
    "@ckeditor/ckeditor5-essentials": "^21.0.0",
    "@ckeditor/ckeditor5-heading": "^21.0.0",
    "@ckeditor/ckeditor5-image": "^21.0.0",
    "@ckeditor/ckeditor5-indent": "^21.0.0",
    "@ckeditor/ckeditor5-link": "^21.0.0",
    "@ckeditor/ckeditor5-list": "^21.0.0",
    "@ckeditor/ckeditor5-media-embed": "^21.0.0",
    "@ckeditor/ckeditor5-paste-from-office": "^21.0.0",
    "@ckeditor/ckeditor5-react": "^2.1.0",
    "@ckeditor/ckeditor5-table": "^21.0.0",
    "@ckeditor/ckeditor5-theme-lark": "^21.0.0",
    "@ckeditor/ckeditor5-typing": "^21.0.0",
    "@ckeditor/ckeditor5-upload": "^21.0.0",
    "Faker": "^0.7.2",
    "raw-loader": "^3.1.0"
  }
}

[Mgsy]

Hi, we haven't tested the editor with Firebase, however, I can see that you use the simple upload adapter. Please, make sure that your back-end returns a correct response object.