If you are working on VueJS application along with Laravel and trying build ckeditor from source, you may face the error ‘cannot read property getAttribute of null’ most probably. I had spent almost 4/5 hours to get rid of this error and found a solution from the ckeditor5-vue repository’s issue.
The solution is to have the following code snipet in the webpack.mix.js file:
\\ ...
/**
* CKE stuff
*/
const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
const CKEStyles = require('@ckeditor/ckeditor5-dev-utils').styles;
const CKERegex = {
svg: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
css: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css/,
};
Mix.listen('configReady', webpackConfig => {
const rules = webpackConfig.module.rules;
const targetSVG = /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/;
const targetCSS = /\.css$/;
// exclude CKE regex from mix's default rules
// if there's a better way to loop/change this, open to suggestions
for (let rule of rules) {
if (rule.test.toString() === targetSVG.toString()) {
rule.exclude = CKERegex.svg;
}
else if (rule.test.toString() === targetCSS.toString()) {
rule.exclude = CKERegex.css;
}
}
});
mix.webpackConfig({
plugins: [
new CKEditorWebpackPlugin({
language: 'en'
})
],
module: {
rules: [
{
test: CKERegex.svg,
use: [ 'raw-loader' ]
},
{
test: CKERegex.css,
use: [
{
loader: 'style-loader',
options: {
singleton: true
}
},
{
loader: 'postcss-loader',
options: CKEStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
},
minify: true
})
},
]
}
]
}
});
\\ ...
Hope this helps trying to those hanging with the problem.