Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Attempted import error: '../../ckeditor5/build/ckeditor' does not contain a default export (imported as 'Editor'). ' for online builder #167

Closed
phongyewtong opened this issue Aug 3, 2020 · 1 comment

Comments

@phongyewtong
Copy link

phongyewtong commented Aug 3, 2020

I was trying to import the package that i download from online builder. Am i doing it correctly? How should I import it?

  1. npm install from the folder.
  2. npm build from the folder.

Error: Module not found: Can't resolve 'ckeditor5-custom-build'

import Editor from 'ckeditor5-custom-build';

Error: Attempted import error: 'ckeditor5-custom-build/build/ckeditor' does not contain a default export (imported as 'Editor').

import Editor from 'ckeditor5-custom-build/build/ckeditor';

Screenshot 2020-08-03 at 8 30 39 PM


import React, { Component, Fragment, useEffect } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
// import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Editor from '../../ckeditor5/build/ckeditor';
// import Base64UploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter';

const TEditor = ({onEditorStateChange, defaultValue}) => {
    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) => {
      console.log( 'Focus.', editor );
    };

    const onInit = (editor) => {
      console.log( 'Editor is ready to use!', editor );
    };

    const editorConfiguration = {
      plugins: [ 'Base64UploadAdapter' ]
    };

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

export default TEditor;

package.json

{
  "name": "tws-dashboard",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://www.google.com/",
  "dependencies": {
    "@ckeditor/ckeditor5-react": "^2.1.0",
    "@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",
    "ckeditor5-custom-build": "file:src/ckeditor5",
    "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": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts 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": {
    "Faker": "^0.7.2"
  }
}
@phongyewtong phongyewtong changed the title Module not found: Can't resolve '../../ckeditor5/build' for online builder Attempted import error: '../../ckeditor5/build/ckeditor' does not contain a default export (imported as 'Editor'). ' for online builder Aug 3, 2020
@Mgsy
Copy link
Member

Mgsy commented Oct 8, 2020

Hi, thanks for the report. It's a duplicate of ckeditor/ckeditor5#2178.

@Mgsy Mgsy closed this as completed Oct 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants