Closed phongyewtong closed 3 years ago
I was trying to import the package that i download from online builder. Am i doing it correctly? How should I import it?
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';
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" } }
Hi, thanks for the report. It's a duplicate of https://github.com/ckeditor/ckeditor5/issues/2178.
I was trying to import the package that i download from online builder. Am i doing it correctly? How should I import it?
Error: Module not found: Can't resolve 'ckeditor5-custom-build'
Error: Attempted import error: 'ckeditor5-custom-build/build/ckeditor' does not contain a default export (imported as 'Editor').
package.json