ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.63k stars 3.71k forks source link

Issue - CKEditor can't be used as JSX component #15783

Open Srijit1998 opened 9 months ago

Srijit1998 commented 9 months ago

📝 Provide detailed reproduction steps (if any)

  1. …Create a new React SPFx app
  2. …Install the dependency @ckeditor/ckeditor5-react: "6.1.0"
  3. …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'.

image

📃 Other details

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

tista-chatterjee commented 9 months ago

Facing same issue. Please help

Priyaddutta commented 9 months ago

I have been facing the same issue. Completely blocked. Looking for resolution. Please help.

goodonestakenDJ commented 9 months ago

@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

vag454arwal114 commented 9 months ago

Facing this issue for quite some time now. Any help and assistance would be appreciated. Thanks!

Witoso commented 9 months ago

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).

Srijit1998 commented 9 months ago

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.

CKEditor_test.zip

@Witoso

Srijit1998 commented 9 months ago

Hi Witoso, did you find anything on this?

@Witoso

Perneel commented 8 months ago

Experiencing the same problem, any updates?

divyavaniponugotu commented 7 months ago

I am also facing the same issue, any solution for this?

guedesite commented 3 months ago

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 } />

Mati365 commented 2 weeks ago

Consider adding allowSyntheticDefaultImports: true to your compilerOptions section of tsconfig.json. It may solve the issue.