Ckeditor5-react: Adding new plugins to CKEditor 5 (Cannot read property 'getAttribute' of null)

[Slasherio]

Hello! I'm trying to add new plugin(s) into the react component of CKEditor. I tried to follow your docs (installation from source), but I can't seem to get this to work.

I want to add plugin Font to editor, and do it like this

import Font from "@ckeditor/ckeditor5-font/src/font";

<CKEditor
    editor={ClassicEditor}
    data={this.props.value}
    onInit={(editor) => {
      console.log(editor);
    }}
    config={{
       plugins: [Font],
       toolbar: ["fontSize", "fontFamily"],
    }}
     onChange={(event, editor) => {
       this.onEditorChange(event, editor);
    }}
/>

After this i had error at console:

ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null
    at IconView._updateXMLContent (iconview.js:100)
    at IconView.render (iconview.js:76)
    at IconView.on (observablemixin.js:249)
    at IconView.fire (emittermixin.js:196)
    at IconView.(anonymous function) [as render] (http://localhost:3030/js/bundle.js:27142:16)
    at ViewCollection.on (viewcollection.js:68)
    at ViewCollection.fire (emittermixin.js:196)
    at ViewCollection.add (collection.js:182)
    at DropdownButtonView.render (buttonview.js:168)
    at DropdownButtonView.render (dropdownbuttonview.js:64)

As i mentioned above, i followed to documentation installing and also configured my webpack.config.js

My webpack config

const path = require("path");
const webpack = require("webpack");
const { styles } = require("@ckeditor/ckeditor5-dev-utils");

module.exports = {
  devtool: "cheap-module-source-map",
  entry: ["webpack-hot-middleware/client", "./dev/js/index"],
  output: {
    path: path.join(__dirname, "dist/js"),
    publicPath: "/js/",
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        loader: require.resolve("file-loader"),
        // Exclude `js` files to keep the "css" loader working as it injects
        // its runtime that would otherwise be processed through the "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpack's internal loaders.
        exclude: [
          /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
        ],
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"],
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true,
            },
          },
          {
            loader: "postcss-loader",
            options: styles.getPostCssConfig({
              themeImporter: {
                themePath: require.resolve("@ckeditor/ckeditor5-theme-lark"),
              },
              minify: true,
            }),
          },
        ],
      },
      {
        test: /\.js$/,
        include: path.join(__dirname, "dev/js"),
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["react", "es2015", "stage-0"],
        },
      },
      {
        test: /\.(sass|scss)/,
        include: path.join(__dirname, "dev/sass"),
        loader: "style-loader!css-loader!sass-loader",
      },
      {
        test: /\.css$/,
        exclude: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
        loader: "style-loader!css-loader",
      },
      {
        test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loaders: ["url-loader"],
      },
      {
        test: /\.(png|jpg)$/,
        loader: "url-loader",
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
      },
    }),
  ],
};

I use my own config, without create-react-app

Version of editor react component - "@ckeditor/ckeditor5-react": "^1.0.0"
Version of type of editor - "@ckeditor/ckeditor5-build-classic": "^11.1.1"
Version of plugin - "@ckeditor/ckeditor5-font": "^10.0.3"

Helpers -

{
  "@ckeditor/ckeditor5-dev-utils": "^11.0.1",
  "@ckeditor/ckeditor5-theme-lark": "^11.1.0",
  "raw-loader": "^0.5.1",
  "webpack": "3.5.0",
}

[pomek]

ckeditor.js:5 TypeError: Cannot read property 'getAttribute' of null

It means that your application cannot load SVG icons.

I am looking at the config that you pasted and:

    loaders: [
      {
        loader: require.resolve("file-loader"),
        // Exclude `js` files to keep the "css" loader working as it injects
        // its runtime that would otherwise be processed through the "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpack's internal loaders.
        exclude: [
          /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
        ],
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ["raw-loader"],
      },

This look nice but this:

      {
        test: /\.(otf|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loaders: ["url-loader"],
      },

overwrites the previous SVG loader. You must disable url-loader for CKEditor 5 icons as you did in file-loader.

PS: A few months ago, we upgraded a version of Webpack. We don't support webpack@3 anymore. See: https://github.com/ckeditor/ckeditor5/issues/1203#issuecomment-419024705.

[Slasherio]

@pomek Thank you for responding. So it's means that i need to update my webpack version?

Or i can update @ckeditor-react to version which support webpack 3?

P.S I can't do it, because project will be live soon and it can appear bugs.

[pomek]

Firstly you need to block the url-loader because it handles svg files and causes the error above.

[Slasherio]

@pomek I rlly don't know what is with my webpack.
Because when i clone project and paste code (of webpack) from here, my project crashed, but console write that webpack built. And when i remove this part of code

{
        loader: require.resolve("file-loader"),
        // Exclude `js` files to keep the "css" loader working as it injects
        // its runtime that would otherwise be processed through the "file" loader.
        // Also exclude `html` and `json` extensions so they get processed
        // by webpack's internal loaders.
        exclude: [
          /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
        ],
        options: {
          name: "static/media/[name].[hash:8].[ext]",
        },
      },

everything works good.

So, thank you for the help, i'll continue to investigate

[Slasherio]

@pomek Issue resolved by updated version of webpack. Thanks.

[pomek]

Good to know. I'm closing this ticket. If you have any question – let us know.

[batjeciftci]

I tried to find the solution for this problem and I would like to credit J. Otten on stackoverflow for the solution.

Use the correct regex and excluding rules and all will be fine.

[joneldiablo]

its any other solution? I won't eject config webpack file