Cannot read property 'getAttribute' of null

[fmay]

Hi - I'm looking to replace Froala and am doing a POC with CKEditor. Unfortunately I'm getting the above error when running the test. It all builds fine.

I am using Vue with Nuxt.

I have followed the guide to the letter (I think).

Here's the error

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:254)
    at IconView.fire (emittermixin.js:196)
    at IconView.(anonymous function) [as render] (http://localhost:4000/_nuxt/vendors.pages/test.js:59093:16)
    at ViewCollection.on (viewcollection.js:68)
    at ViewCollection.fire (emittermixin.js:196)
    at ViewCollection.add (collection.js:182)
    at ButtonView.render (buttonview.js:168)
    at ButtonView.on (observablemixin.js:254)

Here's my vue file

<template>
  <div>
    <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
  </div>
</template>

<script>
import CKEditor from '@ckeditor/ckeditor5-vue'
import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'

export default {
  data() {
    return {
      editor: ClassicEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: {
        plugins: [
          EssentialsPlugin,
          BoldPlugin,
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin
        ],

        toolbar: {
          items: ['bold', 'italic', 'link', 'undo', 'redo']
        }
      }
    }
  }
}
</script>

and my vue.config.js

const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
  // The source of CKEditor is encapsulated in ES6 modules. By default, the code
  // from the node_modules directory is not transpiled, so you must explicitly tell
  // the CLI tools to transpile JavaScript files in all ckeditor5-* modules.
  transpileDependencies: [
      /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/,
  ],

  configureWebpack: {
      plugins: [
          // CKEditor needs its own plugin to be built using webpack.
          new CKEditorWebpackPlugin( {
              // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
              language: 'en'
          } )
      ],
      devtool: '#source-map'
  },

  css: {
      loaderOptions: {
          // Various modules in the CKEditor source code import .css files.
          // These files must be transpiled using PostCSS in order to load properly.
          postcss: styles.getPostCssConfig( {
              themeImporter: {
                  themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
              },
              minify: true
          } )
      }
  },

  chainWebpack: config => {
      // Vue CLI would normally use its own loader to load .svg files. The icons used by
      // CKEditor should be loaded using raw-loader instead.
      config.module
          .rule( 'svg' )
          .test( /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/ )
          .use( 'file-loader' )
          .loader( 'raw-loader' );
  }
};

What have I done wrong!!!

Thanks

[oleq]

It looks like the SVG icons used by CKEditor were not loaded correctly by the raw-loader. We didn't test Nuxt and I can't tell what is wrong with it but I'd search and debug around chainWebpack. Can you create a minimal example that reproduces the issue and publish it, for instance, on GitHub so we can take a look on it?

[nqdy666]

I had the same problem -.-

[fmay]

I actually carried on using Froala for the time being until this gets fixed. I am looking forward to using CKEditor but I won't spend the time hacking it into shape until this works out of the box.

@oleq if you can confirm that it works with Nuxt then I will make the switchover.

[oleq]

@fmay I'm not really into Nuxt but I managed to get rid of errors and get CSS compiled using this nux.config.js (no vue.config.js). The trick is excluding CKEditor CSS from default rules defined in Nuxt's Webpack config. I hope this will help you.

P.S. have your say in https://github.com/ckeditor/ckeditor5/issues/1511.

const pkg = require('./package')
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const { styles } = require( '@ckeditor/ckeditor5-dev-utils' );

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
  ],

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      config.module.rules.forEach( rule => {
        if ( isCssRule( rule ) ) {
          rule.exclude = /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/;
        }
      } );

      config.module.rules.unshift(
        {
          // Or /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/ if you want to limit this loader
          // to CKEditor 5 icons only.
          test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
          use: [ 'raw-loader' ]
        },
        {
          // Or /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/ if you want to limit this loader
          // to CKEditor 5 theme only.
          test: /ckeditor5-[^/]+\/theme\/[\w-/]+\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: {
                singleton: true
              }
            },
            {
              loader: 'postcss-loader',
              options: styles.getPostCssConfig( {
                themeImporter: {
                  themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
                },
                minify: true
              } )
            },
          ]
        }
      );

        // CKEditor needs its own plugin to be built using webpack.
      config.plugins.unshift(
          new CKEditorWebpackPlugin( {
              // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
              language: 'en'
          } )
      );
    }
  }
}

function isCssRule( rule ) {
  return rule.test.toString().indexOf( 'css' ) > -1;
}

[fmay]

That's great - thanks for doing this. I will look to try it out and integrate it asap.

Many thanks!

[kishorpatel85]

getting the same type of error in vue

TypeError: Cannot read property 'getAttribute' of null at IconView._updateXMLContent (app.js:49634) at IconView.render (app.js:49610) at IconView. (app.js:61248) at IconView.fire (app.js:59117) at IconView. [as render] (app.js:61252) at ViewCollection. (app.js:53899) at ViewCollection.fire (app.js:59117) at ViewCollection.add (app.js:55546) at ButtonView.render (app.js:47331) at ButtonView. (app.js:61248)

.vue file `

import CKEditor from "@ckeditor/ckeditor5-vue"; import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor"; import ParagraphPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraph"; import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials"; import BoldPlugin from "@ckeditor/ckeditor5-basic-styles/src/bold"; import ItalicPlugin from "@ckeditor/ckeditor5-basic-styles/src/italic"; import MathType from "@wiris/mathtype-ckeditor5";

export default { components: { Multiselect, ckeditor: CKEditor.component }, data() { return { editor: ClassicEditor, editorData: "'

Content of the editor.

'", editorConfig: { plugins: [ EssentialsPlugin, MathType, ParagraphPlugin, BoldPlugin, ItalicPlugin ], toolbar: { items: ["MathType", "undo", "bold", "italic"] } } } }`

`vue.config.js const path = require('path'); const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin'); const { styles } = require('@ckeditor/ckeditor5-dev-utils');

module.exports = { // The source of CKEditor is encapsulated in ES6 modules. By default, the code // from the node_modules directory is not transpiled, so you must explicitly tell // the CLI tools to transpile JavaScript files in all ckeditor5-* modules. transpileDependencies: [ /ckeditor5-[^/\]+[/\]src[/\].+.js$/, ]};

configureWebpack: {
    plugins: [
        // CKEditor needs its own plugin to be built using webpack.
        new CKEditorWebpackPlugin({
            // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
            language: 'en'
        })
    ]
},

// Vue CLI would normally use its own loader to load .svg and .css files, however:
//  1. The icons used by CKEditor must be loaded using raw-loader,
//  2. The CSS used by CKEditor must be transpiled using PostCSS to load properly.
chainWebpack: config => {
    // (1.) To handle editor icons, get the default rule for *.svg files first:
    const svgRule = config.module.rule('svg');

    // Then you can either:
    //
    // * clear all loaders for existing 'svg' rule:
    //
    //      svgRule.uses.clear();
    //
    // * or exclude ckeditor directory from node_modules:
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'));

    // Add an entry for *.svg files belonging to CKEditor. You can either:
    //
    // * modify the existing 'svg' rule:
    //
    //      svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
    //
    // * or add a new one:
    config.module
        .rule('cke-svg')
        .test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
        .use('raw-loader')
        .loader('raw-loader');

    // (2.) Transpile the .css files imported by the editor using PostCSS.
    // Make sure only the CSS belonging to ckeditor5-* packages is processed this way.
    config.module
        .rule('cke-css')
        .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
        .use('postcss-loader')
        .loader('postcss-loader')
        .tap(() => {
            return styles.getPostCssConfig({
                themeImporter: {
                    themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
                },
                minify: true
            });
        });
}

};

[nitish1986]

@kishorpatel85 Did you get any solution to your problem? I'm also facing the same issue, this comes only when I try to include @wiris/mathtype-ckeditor5 or else it works perfectly fine on my local builds.

[huangluloveTing]

next? @nitish1986

[mohitsehgal]

@kishorpatel85 Did you get any solution to your problem? I'm also facing the same issue, this comes only when I try to include @wiris/mathtype-ckeditor5 or else it works perfectly fine on my local builds.

Same Problem for me. @Author please do something

[pinktoadette]

same problem in angular

[mi-lopez]

@kishorpatel85 Did you get any solution to your problem? I'm also facing the same issue, this comes only when I try to include @wiris/mathtype-ckeditor5 or else it works perfectly fine on my local builds.

Same Problem for me. @author please do something

Same problem in VueJS 2+

[crying2812]

I have same issues, tried many diffrent ways but it wont work :(

[felippi]

I have the same problem with Vue 2

[FilipTokarski]

For anyone experiencing problems with Vue and Wiris MathType plugin, please see this solution, it might help.

[JarvisH]

I had the same issue during vue-cli tests, the problem turned out to be moduleNameMapper in the jest config file, where all svgs where being mocked/stubbed.

[elcferreira]

Solution and catching error: I after a lot of tests I understand how webpack works and I detect that the plugin @nuxtjs/svg that was causing the error.

So the solution was remove the plugin and create the svg loaders by my own.

------------ EDIT

Guys I tested the whole solution for nuxt annouced here but nothing works and I still getting this error: Someone have a solution?

I tested all the solutions in this issue: https://github.com/ckeditor/ckeditor5/issues/6071

The error still happening, and I'm not using the mathtype-ckeditor5

I believe that could have a conflict between this nuxt module:
https://github.com/nuxt-community/svg-module#raw-loader

[sadeq-qafari]

After so many attempts this helped me fix the problem: https://github.com/ckeditor/ckeditor5/issues/6071#issuecomment-866209780 just needed the webpack rule like this:

        const filesRuleIndex = cfg.module.rules.findIndex(item => {
          return item.test.test('.svg')
        })

        if (filesRuleIndex !== -1) {
          cfg.module.rules[filesRuleIndex].test = /\.(png|jpe?g|gif|webp)$/
          const svgRule = {...cfg.module.rules[filesRuleIndex]}
          svgRule.test = /\.svg/
          svgRule.exclude = svgRule.exclude || []
          svgRule.exclude.push(path.join(__dirname, 'node_modules', '@ckeditor'))
          cfg.module.rules.push(svgRule)
        }

        cfg.module.rules.push({
          test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          use: ["raw-loader"]
        })

[AlejandroBryan]

After so many attempts this helped me fix the problem: ckeditor/ckeditor5#6071 (comment) just needed the webpack rule like this:

        const filesRuleIndex = cfg.module.rules.findIndex(item => {
          return item.test.test('.svg')
        })

        if (filesRuleIndex !== -1) {
          cfg.module.rules[filesRuleIndex].test = /\.(png|jpe?g|gif|webp)$/
          const svgRule = {...cfg.module.rules[filesRuleIndex]}
          svgRule.test = /\.svg/
          svgRule.exclude = svgRule.exclude || []
          svgRule.exclude.push(path.join(__dirname, 'node_modules', '@ckeditor'))
          cfg.module.rules.push(svgRule)
        }

        cfg.module.rules.push({
          test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          use: ["raw-loader"]
        })

Hi, may you be able to explane ? how it's works for with plane js and webpack without a core ? i am having the same issue event thought my bundle compile without errors.

[alext100]

Had this problem when installed and then uninstalled some plugins. Some packages was deleted with them. Helped just npm i