Error: "export 'default' (imported as 'ClassicEditor') was not found in '@ckeditor/ckeditor5-build-classic'

[woto]

Hi, i've decided to try using ckeditor according with https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html but stucked with error

"export 'default' (imported as 'ClassicEditor') was not found in '@ckeditor/ckeditor5-build-classic'

i've also tried inline version and got similar error.

Have no idea what i am doing wrong. What else may i report to better understand where is the problem? Thank you!

[woto]

Made a demo repo with a problem
https://github.com/woto/ckeditor_rails_react
clean steps reproducing guide woto/ckeditor_rails_react@94f9938

[Reinmar]

Hi! Thanks for providing all the steps, we really appreciate that.

However, this issue is odd because I assume that the mentioned integration method works for the great majority of people since this is the first report mentioning such a problem. Therefore, I think that there may be something specific in your setup which causes this.

I've seen ckeditor/ckeditor5-build-classic#89 and it doesn't change the code semantics. It's still exactly the same code. So there's a question of why it starts to work after this change. Most likely webpack or some other tool treats differently such a way to format an export statement. I did some googling and found this: webpack/webpack#4817 (comment). Maybe you have a similar problem.

[Reinmar]

PS. Perhaps we can also change the way how we export this class in ckeditor.js files, but I'd like to know why and confirm which way is more correct, if we were to change that.

[Reinmar]

I've seen your PR

EDIT: I meant ckeditor/ckeditor5-build-classic#89.

[woto]

@Reinmar thank you for replay

Changed as you proposed. For now getting another error. Will try to dig it later by comparing any working project with my babel.config.js https://github.com/woto/ckeditor_rails_react/blob/master/babel.config.js

[woto]

@Reinmar wow, accidentally i made it works :)

woto/ckeditor_rails_react@fcf8f75#diff-4eb01bf0c37b5cc636b6fb94e2ce76bf

Sorry i'm not JS master and i may be wrong, but my opinion is that there is a problem in wrong ES6 exporting of ClassicEditor. It is exporting to window.ClassicEditor.

[Reinmar]

I can see this that this was already causing problems (thanks for pinging us in #776). So, it's not something new.

We've got to dive a bit into this and figure out why it sometimes fail. I'm pretty sure that it's something about webpack/babel configuration.

[JohnPettigrew]

I seem to be having the same problem with a Rails 6 app. When I follow the instructions to import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; in my JS entry point, the app compiles fine. However, when I add the code to actually run ckeditor to the web page, I get an error in the console Uncaught ReferenceError: ClassicEditor is not defined. If I then add window.ClassicEditor = ClassicEditor to the entry point then the build fails with the above error: export 'default' (imported as 'ClassicEditor') was not found in '@ckeditor/ckeditor5-build-classic'.

I'm using webpack 4.2.2 via the Rails gem, but not React (as the previous user was).

NB If I use the CJS syntax (const ClassicEditor = require( '@ckeditor/ckeditor5-build-classic' ); ) then I don't get this build error - although ckeditor still fails with the same console message even after adding window.ClassicEditor = ClassicEditor line, which usually resolves this problem with imported modules. I'm no JS expert, though!

[AndreiMotinga]

also having this problem on Rails 6

[gustiando]

Same. Adding modules: 'commonjs' suggested earlier didn't seem to work.

UPDATE: Issue was with Webpacker, this fixed for me.

[poncianodiego]

I am having this issue with a simple custom build

[AndreiMotinga]

hey @poncianodiego, I vaguely remember having some issues months ago with imports so gonna share what worked for me, dont' know if this will help you.. just gonna copy-paste some code here for you to give it a shot...

I have rails 6 app that uses react. in package.json I have

    "@ckeditor/ckeditor5-react": "^2.1.0",
    "ckeditor5-build-classic-simple-upload-adapter": "^1.0.2",

and here's my entire component,

import React, { useState, useEffect } from "react"
import FormLabel from "@material-ui/core/FormLabel"
import Typography from "@material-ui/core/Typography"
import MenuItem from "@material-ui/core/MenuItem"
import Select from "@material-ui/core/Select"
import { withStyles } from "@material-ui/core/styles"
import { capitalize } from "admin/helpers"
import CodeEditor from "./CodeEditor"
import CKEditor from "@ckeditor/ckeditor5-react"
import "ckeditor5-build-classic-simple-upload-adapter"

const Editor = ({ classes, onChange, name, value, mode, helperText }) => {
  const [currentMode, setCurrentMode] = useState(mode)

  useEffect(() => {
    setCurrentMode(mode)
  }, [mode])

  const triggerChange = (event, editor) => {
    const value = editor.getData()
    const fakeEvent = { target: { value } }
    onChange(fakeEvent)
  }

  let editor
  if (currentMode === "wysiwyg") {
    editor = (
      <CKEditor
        editor={ClassicEditor}
        data={value}
        onChange={triggerChange}
        config={{
          simpleUpload: {
            uploadUrl: "/api/images/ckeditor_upload"
          }
        }}
      />
    )
  } else {
    editor = <CodeEditor mode={currentMode} name={name} value={value} onChange={onChange} />
  }

  return (
    <div className={classes.root}>
      <div className={classes.label}>
        <FormLabel>{capitalize(name)}</FormLabel>
        <Select value={currentMode} onChange={e => setCurrentMode(e.target.value)}>
          <MenuItem value="wysiwyg">WYSIWYG</MenuItem>
          <MenuItem value="html">HTML</MenuItem>
          <MenuItem value="css">CSS</MenuItem>
        </Select>
      </div>
      {editor}
      <Typography variant="body2" display="block">
        {helperText}
      </Typography>
    </div>
  )
}

Editor.defaultProps = {
  mode: "wysiwyg"
}

const styles = {
  root: {
    padding: "10px 0"
  },
  label: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 6
  }
}

export default withStyles(styles)(Editor)

[poncianodiego]

@AndreiMotinga thanks so mucb for sharing! Exactly; the import should kot assing a name. That did it for me.

Instead:
import Editor from 'path..' Is just: import 'path..' `
Then ClassicEditor var becomes available.

[avrail]

@AndreiMotinga thanks so mucb for sharing! Exactly; the import should kot assing a name. That did it for me.

Instead:
import Editor from 'path..' Is just: import 'path..' `
Then ClassicEditor var becomes available.

i struggled for many days but when i saw your comment what you suggested worked fine.

import '../../@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js'

DecoupledEditor
.create(document.querySelector('.document-editor__editable'), {
})
.then(editor => {
const toolbarContainer = document.querySelector('.document-editor__toolbar');

    toolbarContainer.appendChild(editor.ui.view.toolbar.element);

    window.editor = editor;
})
.catch(err => {
    console.error(err);
});

[samy-blake]

Made a demo repo with a problem
https://github.com/woto/ckeditor_rails_react
clean steps reproducing guide woto/ckeditor_rails_react@94f9938

for me, it was just

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

and in the tsconfig.base.json the target change from es5 to es6.

{
  "compileOnSave": false,
  "compilerOptions": {
    [...],
    "target": "es6",
    [...]
  }
}

[jamesst20]

For Rails 6, what worked for me is to do it this way :

import '@ckeditor/ckeditor5-build-classic';

$(document).ready(function () {
  ClassicEditor
    .create(document.querySelector('.ckeditor'))
    .then(editor => {
    })
    .catch(error => {
      console.error(error);
    });
});

This approach doesn't work (Uncaught ReferenceError: ClassicEditor is not defined) :

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

[audreyfeldroy]

Just another data point...I'm running into this error in a non-Rails Vue.js project. Which means it's not Rails-specific.

My custom CKEditor 5 build (https://github.com/audreyfeldroy/ckeditor5-build-writernaut) worked fine until I did an npm update on the project, resulting in this error.

Things that didn't work for me:

• Moving export default to the bottom like in update ckeditor.js ckeditor5-build-classic#89
• Adding "@babel/preset-env", { "modules": "commonjs" }
• Changing import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; to import '@ckeditor/ckeditor5-build-classic';
• Renaming my editor class
• Making other config changes with Webpack, Babel, etc.

What worked for me:

• Restoring my package.json and package-lock.json from before my npm update, blowing away my node_modules/, and doing a fresh npm install for both the custom CKEditor 5 build and the project using it

[Bacce]

I had the same problem. Custom CKEditor5 build, CreateReactApp.
On dev environment it worked fine after adding /* eslint-disable */ to the first line of the ckeditor build output js file.

When tried to build the react app, it failed with the following:
Attempted import error: 'InlineEditorCustom' is not exported from '../../ckeditor5-build-custom/ckeditor'.

What I needed was to use require instead of import in my component.
so, instead of:
import { InlineEditorPortalom } from '../../ckeditor5-build-portalom/ckeditor';
I did this:
const InlineEditorPortalom = require( '../../ckeditor5-build-custom/ckeditor' );

Now my build is running fine.

Edit:
Unfortunately, the app is failing.

[panta82]

I've been struggling with this for a day. Everything works fine in development, but not in production build.

The problem seems to come from how webpack sees CKEditor's umd module.

In development:

(function webpackUniversalModuleDefinition(root, factory) {
  if (true) module.exports = factory();else {}
})(window, function () {

In production:

(function webpackUniversalModuleDefinition(root, factory) {
  if (typeof exports === 'object' && typeof module === 'object') module.exports = factory();
  else if (typeof define === 'function' && define.amd) define([], factory);
  else if (typeof exports === 'object') exports['CKEditor'] = factory();
  else root['CKEditor'] = factory();
})(window, function () {

In development, it just assigns it to module.exports and it works fine with import syntax. In production it falls to the path of root['CKEditor'] = factory(), which assigns the class to global window object. This doesn't get imported properly by other code, basically they get an anemic module object ({__esModule: true}).

I tried all sorts of things to make production build able to import this module. I know it's possible, because my Storybook production build sees the module just find. But I just couldn't figure it out.

I ended up doing the following hack.

My custom CKEditor build goes into CKEditor-umd.js. What my code actually imports is an CKEditor.ts file, that looks like this:

import CKEditor, {CKEditorConfig} from './CKEditor-defs';
import './CKEditor.css';

export type {CKEditor, CKEditorConfig};

const CKEditorDirectImport = require('./CKEditor-umd.js');
const CKEditorClass = (
  typeof CKEditorDirectImport === 'function'
    ? CKEditorDirectImport
    : window['CKEditor']
  ) as typeof CKEditor;
export default CKEditorClass;

So I sniff whether there is a proper export, and pick it. Otherwise, re-export global value.

Not ideal, but it seems to work.

[mrdav30]

having a similar issue with my custom build after upgrading to angular 12, before on 11 everything was working fine.

• target: 'es6' in tsconfig.json
• prior to update, using import * as CustomEditor './ckeditor-custom/ckeditor'; was working fine

I tried pulling a new custom build and still ran into the same issue. Reviewing #146 & #176 were also no help and still resulted in a "this.editor.create() is not a function" or "Error: [ts] Module './ckeditor-custom/ckeditor'' has no exported member 'ClassicEditor'

What ultimately worked for me was chaning my import to:

import './ckeditor-custom/ckeditor';

and inside my OnInit method call the ClassicEditor from the window:

public editor = window['ClassicEditor'];

Very hacky, but it works for now...

[robbens]

This is still an issue.

I cloned the @ckeditor/ckeditor5-classic-build build, added one custom plugin and built the files.
But I cannot import it in my project now!

The project is a Vue.js project using laravel-mix for webpack stuff.

Importing the classic build like this works fine

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

But if I try to import my own build...

import ClassicEditor from '../custom-ckeditor-build';

I get

export 'default' (imported as 'ClassicEditor') was not found in '../custom-ckeditor-build' (module has no exports)

The funny thing is that if I take the custom code that is not working (custom-ckeditor-build/build/ckeditor.js) and replace it with @ckeditor/ckeditor5-build-classic/build/ckeditor.js, I get the same error! 🤯

[lucabecchetti]

@robbens how did you solved?

[thomasFjorstad]

This works for me:
import InlineEditor from '@ckeditor/ckeditor5-build-inline';
const { CKEditor } = require('@ckeditor/ckeditor5-react');

[EllipticElysium]

My app was using ckeditor5 custom build without issue, however i started having the same issue when i switched from using craco to using vite

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[DeaVenditama]

I had the same problem. Custom CKEditor5 build, CreateReactApp. On dev environment it worked fine after adding /* eslint-disable */ to the first line of the ckeditor build output js file.

When tried to build the react app, it failed with the following: Attempted import error: 'InlineEditorCustom' is not exported from '../../ckeditor5-build-custom/ckeditor'.

What I needed was to use require instead of import in my component. so, instead of: import { InlineEditorPortalom } from '../../ckeditor5-build-portalom/ckeditor'; I did this: const InlineEditorPortalom = require( '../../ckeditor5-build-custom/ckeditor' );

Now my build is running fine.

Edit: Unfortunately, the app is failing.

This solution works for me..
I used custom build ckeditor for react.
Thank you

[MRezaKarimi]

Same issue with custom build ckeditor (VueJS)

[joshua-barbosa]

This is still an issue.

Instead of import Editor from 'ckeditor-custom-build'
I did this:
import 'ckeditor-custom-build'
declare global { const CKSource: { Editor: any; EditorWatchdog: any; }; }
Since I realized that ckeditor.js was exporting a CKSource object that packaged the Editor class and EditorWatchdog, rather than directly exporting the Editor

[Witoso]

Online builder sometimes provides the Watchdog component, as it's a recommended setup when you use more complex plugins (like collaboration). In this case, you need to use named imports:

import { EditorWatchdog, Editor } from 'ckeditor-custom-build';

[aleksandarbos]

for anyone still fighting this issue (react + vite), and troubling importing custom build: #12963 (comment)

[Witoso]

Please keep in mind that using predefined or custom builds may not work in the future. The v42.0.0 solved problems related to extending, works flawlessly with Vite, I highly encourage migrating.