Cannot read property 'getAttribute' of null in react

[Mekala-palaniyappan]

This is the craco.config.js file

const CracoLessPlugin = require('craco-less'); const antVariables = require('./src/styles/antVariablesOverrides'); const { styles } = require('@ckeditor/ckeditor5-dev-utils'); const cssRegex = /.css$/; const cssModuleRegex = /.module.css$/;

module.exports = { module: { rules: [ { test: /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/, use: ['raw-loader'], }, { test: /ckeditor5-[^/\]+[/\]theme[/\].+.css$/, use: [ { loader: 'style-loader', options: { injectType: 'singletonStyleTag', attributes: { 'data-cke': true, }, }, }, { loader: 'postcss-loader', options: styles.getPostCssConfig({ themeImporter: { themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'), }, minify: true, }), }, { test: cssRegex, exclude: [ cssModuleRegex, /ckeditor5-[^/\]+[/\]theme[/\].+.css$/, ], // (...) }, { test: cssModuleRegex, exclude: [/ckeditor5-[^/\]+[/\]theme[/\].+.css$/], // (...) }, { 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: [ /.(js|mjs|jsx|ts|tsx)$/, /.html$/, /.json$/, /ckeditor5-[^/\]+[/\]theme[/\]icons[/\][^/\]+.svg$/, /ckeditor5-[^/\]+[/\]theme[/\].+.css$/, ], options: { name: 'static/media/[name].[hash:8].[ext]', }, }, ], }, ], }, plugins: [ { plugin: CracoLessPlugin, options: { lessLoaderOptions: { lessOptions: { modifyVars: antVariables, javascriptEnabled: true, }, }, }, }, ], };

Expected: CKEditor visible but throwing an error like this in screenshot

[Mgsy]

Hi, it seems there's something wrong with your webpack configuration. Did you follow our React integration guide?

[Mekala-palaniyappan]

@Mgsy : Why we need to yarn eject, I am in the middle of a project, ejecting a project will create problems, other than that, Are we have any other solution for not ejecting a project.

[Bhavesh-Radadiya]

Craco is not updating CRA Webpack config rules. Need to update the default rules manually using configure from the Craco. https://www.npmjs.com/package/@craco/craco#configuration-file

[wtakayama-chwy]

Any updates here? I found that the react-scripts version 4.0.3 works fine with craco with these configurations, but upgrading to the latest 5.0.1 doesn't

[wtakayama-chwy]

@Mekala-palaniyappan

@Reinmar maybe it would be good to update the documentation for craco

I had the same issue as you, and it took me quite a while to understand what was happening. In my case, and probably yours it's related with react-scripts package version. Recent react-script version > 4.0.3, will throw this error. You can either downgrade your package, or use this "plugin" that I had created:

GIST: https://gist.github.com/william-takayama/6b2a7e4b0b9497e59fa4ba60bed2e6d0 stackoverflow answer

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

const getLoaderByRegex = (loaders, regex) => loaders.find(
  item => !Array.isArray(item.test) && (String(item.test) === String(regex))
)

const cssRegex = /\.css$/
const cssModuleRegex = /\.module\.css$/
const CKEditorRegExp = {
  cssExp: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
  svgExp: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
}

const CKEditor5WebpackConfigPlugin = {
  overrideWebpackConfig: ({ webpackConfig, options = {} }) => {
    // Extract the oneOf array from the relevant webpack.module.rules object
    const { oneOf } = webpackConfig.module.rules.find(rule => rule.oneOf)
  
    // Add the SVG and CSS loaders to the oneOf array in the first position. 
    // As oneOf array uses the first loader that matches the value of test, we need to ensure that
    // SVGs and CSS files from ckeditor5 folder inside node_module, are using the correct loaders 
    // provided on documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source.html#webpack-configuration
    oneOf.unshift(
      {
        // ASSET-MODULES replaces raw-loader - https://webpack.js.org/guides/asset-modules/
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        type: 'asset/source',
      },
      {
        test: CKEditorRegExp.cssExp,
        use: [
          {
            loader: "style-loader",
            options: {
              injectType: "singletonStyleTag"
            }
          },
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: styles.getPostCssConfig({
                themeImporter: {
                  themePath: require.resolve("@ckeditor/ckeditor5-theme-lark")
                },
                minify: true
              })
            }
          }
        ]
      }
    )
  
    // Make sure cssRegex doesn't use loader for CKEditor5
    getLoaderByRegex(oneOf, cssRegex).exclude = [cssModuleRegex, CKEditorRegExp.cssExp]
    // Make sure cssModuleRegex doesn't use loader for CKEditor5
    getLoaderByRegex(oneOf, cssModuleRegex).exclude = [CKEditorRegExp.cssExp]
  
    return webpackConfig
  }
}

module.exports = { CKEditor5WebpackConfigPlugin }

// usage -> craco.config.js -> 
/*
module.exports = {
  plugins: [{
    plugin: CKEditor5WebpackConfigPlugin,
  }],
}
*/

[zubozrout]

Hi, when trying to use either the above craco conf or any other that I've bumped to or an older one I used previously I seem to not be able to run CKEditor5 no matter what. In my case the error is similar-ish (same lines at least):

CKEditorError: svg is null
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-svg is null
    _updateXMLContent iconview.js:100
    render iconview.js:76

Trying with "@craco/craco": "^7.0.0-alpha.7" + "react-scripts": "^5.0.0". But using older versions of these dependencies don't seem to do any trick.

Edit: Likely the same issue as this one: https://github.com/ckeditor/ckeditor5/issues/12123

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).