Ckeditor5: 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 https://github.com/woto/ckeditor_rails_react/commit/94f99385c4496d89d05de8ffff0d0123a757c57b

[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 https://github.com/ckeditor/ckeditor5-build-classic/pull/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: https://github.com/webpack/webpack/issues/4817#issuecomment-515100040. 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 https://github.com/ckeditor/ckeditor5-build-classic/pull/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 :)

https://github.com/woto/ckeditor_rails_react/commit/fcf8f753c794b503128e6c23b521998b968f5782#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 https://github.com/ckeditor/ckeditor5/issues/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

[gumatias]

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 https://github.com/ckeditor/ckeditor5-build-classic/pull/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.