ckeditor
Issue - CKEditor can't be used as JSX component
📝 Provide detailed reproduction steps (if any)
- …Create a new React SPFx app
- …Install the dependency @ckeditor/ckeditor5-react: "6.1.0"
- …Import the CKEditor component from '@ckeditor/ckeditor5-react' (import { CKEditor } from '@ckeditor/ckeditor-react')
✔️ Expected result
The app should build properly without any errors.
❌ Actual result
I am getting errors as 'CKEditor cannot be used as a JSX component'.
📃 Other details
- Browser: …Chrome
- OS: …Windows
- First affected CKEditor version: …'6.0.0'
package.json
{ "name": "ck-editor-app", "version": "0.0.1", "private": true, "engines": { "node": ">=16.13.0 <17.0.0" }, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "@ckeditor/ckeditor5-build-classic": "^41.0.0", "@ckeditor/ckeditor5-react": "^6.1.0", "@microsoft/sp-core-library": "1.17.1", "@microsoft/sp-lodash-subset": "1.17.1", "@microsoft/sp-office-ui-fabric-core": "1.17.1", "@microsoft/sp-property-pane": "1.17.1", "@microsoft/sp-webpart-base": "1.17.1", "office-ui-fabric-react": "^7.199.1", "react": "17.0.1", "react-dom": "17.0.1", "tslib": "2.3.1" }, "devDependencies": { "@microsoft/eslint-config-spfx": "1.17.1", "@microsoft/eslint-plugin-spfx": "1.17.1", "@microsoft/rush-stack-compiler-4.5": "0.4.0", "@microsoft/sp-build-web": "1.17.1", "@microsoft/sp-module-interfaces": "1.17.1", "@rushstack/eslint-config": "2.5.1", "@types/react": "17.0.45", "@types/react-dom": "17.0.17", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "eslint": "8.7.0", "eslint-plugin-react-hooks": "4.3.0", "gulp": "4.0.2", "typescript": "4.5.5" } }
Can anyone please help me on this?
@FilipTokarski @mdabkowska88
I have been facing the same issue. Completely blocked. Looking for resolution. Please help.
@FilipTokarski @mdabkowska88
Tried to create and replicate this , facing the same. Wondering what could be the root cause. Please reach out if anyone has cracked through this
Facing this issue for quite some time now. Any help and assistance would be appreciated. Thanks!
We appreciate all the comments, if you need access to immediate support, use our dedicated support channel. Meanwhile, please prepare for us a minimal reproducible sample that we could use (zip, stackblitz or a GitHub repo).
Hi Witoso, thanks for the reply. I am providing the React SPFx app zip here. Please, let me know if you need anything else on this.
@Witoso
Still not fixed
Hard fix for ReactJS: const Editor: ({}:any) => JSX.Element = useMemo(() => CKEditor as unknown as () => JSX.Element, []);
Then use Editor as JSX element: <Editor editor={ ClassicEditor } />
Consider adding allowSyntheticDefaultImports: true to your compilerOptions section of tsconfig.json. It may solve the issue.
I'm not sure but It seems like it requires React 19 types now. I had React 18 types and the error disappeared after I updated types to 19
