Ckeditor5-react: Cannot read property 'getAttribute' of null

[sirajalam049]

I am following this tutorial to create a custom plugin for code snippet.

I've created the app using create-react-app command.
I've read this issue and its solution couldn't work for me.

[Mgsy]

Hello, could you paste the entire error message from your console? Additionally, please share with us your webpack config.

[pomek]

If you are using CRA@2, try to follow the steps listed in this instruction – https://github.com/ckeditor/ckeditor5/blob/7aaa7241a01f7ff38d19ddb2061c9a60c7b6bc60/docs/builds/guides/frameworks/react.md#create-react-app2.

[pomek]

Omg, GitHub… Sorry for closing/reopening.

The attached link above is a part of PR (https://github.com/ckeditor/ckeditor5/pull/1605) that improves the React Integration guide in our documentation.

[sirajalam049]

Thank You @pomek , that documentation for CRA@2 helped me, but it is not loading the css.
My editor is looking like this

[pomek]

Could you check the style of the dropdown element? You can use the browser's inspector to check it out. It seems like something is overwriting our CSS.

[sirajalam049]

Nothing seems overridden here by something else. All the css are provided by CK.

[pomek]

Weird. Could you write step by step what you did? I'll try to reproduce the issue on our side.

[sirajalam049]

OK, let me create a minimal react app to show what I've done

[sirajalam049]

I have created the app.
Steps that I followed is,

1. npx create-react-app app-name --typescript
2. installed the CKEditor packages as given in the package.json
3. Added a custom plugin named CKEditorCodeSnippetPlugin in the root directory.
4. Edited the webpack.config.js as per the documentation you mentioned above.
   Still getting the results as attached above
   https://github.com/sirajalam049/ckeditor-integartion-minimal-project

[pomek]

AFAICS, you try to add the CKEditorCodeSnippetPlugin plugin to ready-to-use build which won't work and is not the correct way how to add plugins to the editor. See: https://github.com/ckeditor/ckeditor5/issues/1047#issuecomment-393068327.