Tuto "change the WYSIWYG with CKEditor" : Ckeditor errors

Questions and Answers Strapi Backend
1
System Information
  • Strapi Version: 3.2.0-beta.1
  • Operating System: OSX
  • Database:
  • Node Version: 14.15.0
  • NPM Version: 6.14.8
  • Yarn Version: 1.22.5

Hello everyone,

I followed this tuto to change the WYSIWYG with CKEditor (Field Registering - Strapi Developer Documentation). But i have this error. Impossible to see my posts when i add a rich text editor.

Could you help me with that?

Thanks a lot !

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of Editor.

in div (created by styled.div)
in styled.div (created by Editor)
in Editor (created by Wysiwyg)
in div (created by Wysiwyg)
in Wysiwyg (created by Inputs)
in Inputs (created by Context.Consumer)
in FormattedMessage (created by Inputs)
in Inputs
in Inputs
in Unknown (created by EditView)
in div (created by EditView)
in div (created by EditView)
in div (created by styled.div)
in styled.div (created by EditView)
in div (created by EditView)
in div (created by EditView)
in div (created by styled.div)
in styled.div (created by EditView)
in form (created by EditViewDataManagerProvider)
in EditViewDataManagerProvider (created by EditView)
in EditViewProvider (created by EditView)
in EditView
in EditView (created by Context.Consumer)
in Route (created by CollectionTypeRecursivePath)
in Switch (created by CollectionTypeRecursivePath)
in Suspense (created by CollectionTypeRecursivePath)
in CollectionTypeRecursivePath (created by Context.Consumer)
in Route (created by Main)
in Switch (created by Main)
in Suspense (created by Main)
in Unknown (created by Main)
in Main (created by ConnectFunction)
in ConnectFunction (created by PluginDispatcher)
in ErrorBoundary (created by PluginDispatcher)
in div (created by PluginDispatcher)
in PluginDispatcher
in PluginDispatcher (created by Context.Consumer)
in Route (created by Admin)
in Switch (created by Admin)
in div (created by styled.div)
in styled.div (created by Admin)
in div (created by Admin)
in div (created by styled.div)
in styled.div (created by Admin)
in UserProvider (created by Admin)
in GlobalContextProvider (created by Admin)
in Admin (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in injectIntl(Connect(Admin)) (created by Context.Consumer)
in Route (created by PrivateRoute)
in PrivateRoute (created by App)
in Switch (created by App)
in div (created by styled.div)
in styled.div (created by App)
in div (created by styled.div)
in styled.div (created by App)
in Unknown (created by Theme)
in Theme (created by App)
in App (created by ConnectFunction)
in ConnectFunction
in Router (created by BrowserRouter)
in BrowserRouter
in IntlProvider (created by LanguageProvider)
in LanguageProvider (created by ConnectFunction)
in ConnectFunction
in StrapiProvider
in Provider
1 Like
2

Related discussion :slight_smile: Add ckeditor plugins

1 Like
3

Yup, same thing, and after it started appearing it wouldn’t go away, I used a day old github image where the classic ckeditor was working and now it doesn’t work. The only way to get strapi working was to remove the plugins folder, dependencies and go back to the default (non ck) editor.

It says styled comp, but I am suspicious that this is not the real issue, in my package json I am importing: "styled-components": "^5.2.0".

By clicking around after the error appears and refreshing the pages I got this:
“Cannot GET /admin/plugins/content-manager/collectionType/application::category.category”
sharing in case it helps.

I don’t know if it is related but the Media Library also errors out for me (500), does it work for you?

At risk of jinxing it… I added brackets as suggested in the Strap Slack and now all works, at least so far. I tried with Classic editor and then with the one I created and published to npm and works fine too.

@Nils check if your imports are like this in the CKEditor/index.js

import { CKEditor } from ‘@ckeditor/ckeditor5-react’;
import ClassicEditor from ‘@ckeditor/ckeditor5-build-classic’;