Getting "Cannot read properties of null (reading 'tagName')" upgrading for 4.3.1 to 4.4.0

[rwankar]

I just upgraded from 4.3.1 to 4.4.0 and I get this error on the line indicated below.

A test case is a bit difficult to send as this is wrapped in a React component that's wrapped in another one. Since this is working fine in 4.3.1 and breaks in 4.4.0 I'm hoping this and the config should be sufficient.

return function(t3, e3) {
          if ("function" != typeof e3 && null !== e3) throw new TypeError("Super expression must either be null or a function");
          t3.prototype = Object.create(e3 && e3.prototype, { constructor: { value: t3, writable: true, configurable: true } }), Object.defineProperty(t3, "prototype", { writable: false }), e3 && h(t3, e3);
        }(e2, t2), n2 = e2, r2 = [{ key: "componentDidMount", value: function() {
          var t3 = this;
          import("/node_modules/.vite/deps/froala_editor.min-AUO652FW.js?v=cc0cdae0").then(function(e3) {
            y = e3.default;
            var n3 = t3.el.tagName.toLowerCase(); // **ERROR HERE**
            -1 != t3.SPECIAL_TAGS.indexOf(n3) && (t3.tag = n3, t3.hasSpecialTag = true), t3.props.onManualControllerReady ? t3.generateManualController() : t3.createEditor();
          });
        } }, { key: "componentWillUnmount", value: function() {
          this.destroyEditor();
        } }, { key: "componentDidUpdate", value: function() {
          JSON.stringify(this.oldModel) != JSON.stringify(this.props.model) && this.setContent();
        } },

Our config

<Froala
   model={updatedModel}
   tag="textarea"
   config={{
     heightMax: props.maxHeight || 500,
     theme: editorTheme,
     key: '<our key>',
     toolbarInline: props.toolbarInline || false,
     charCounterCount: false,
     pasteAllowedStyleProps: ['font-size', 'color', 'background-color', 'font-weight'],
     pasteDeniedTags: [
       'style',
       'script',
       'select',
       'input',
       'textarea',
       'button',
       'iframe',
       'embed',
       'object',
       'bgsound',
       'meta',
       'frameset',
       'frame',
       'xml',
       'isindex',
       'applet',
       'svg',
       'form',
       props.disableImageOptions ? 'img' : '',
     ],
     pasteDeniedAttrs: ['class', 'id', 'onclick', 'onerror', 'onload', 'onmouseout'],
     htmlAllowedAttrs: [...defaultHtmlAllowedAttrs, 'loading'],
     toolbarVisibleWithoutSelection: props.toolbarVisibleWithoutSelection || false,
     zIndex: 1,
     imageUpload: true,
     imageDefaultAlign: 'left',
     imageDefaultDisplay: 'inline-block',
     imageMaxSize: maxUploadSize,
     // Allow to upload PNG and JPG.
     imageAllowedTypes: imageAllowedTypes,
     events: {
       'image.beforeUpload': function (images) {
         var editor = this as any;
         doUpdateLoading(true);
         editor.edit.off(); // disable editing in the editor
         handleImageUpload(editor, images);
         return false;
       },
       'image.beforePasteUpload': function (img) {
         //img.src = "";
         //img.complete = false;
         console.log('img paste');
         // setIsImageLoading(true);
       },
       'image.loaded': function (img) {
         const editor = this as any;
         editor.edit.on(); // reenable editing in editor
         doUpdateLoading(false);
       },
       'image.error': function (error) {
         console.error(error);
         const editor = this as any;
         editor.edit.on(); // reenable editing in editor
         doUpdateLoading(false);
       },
       blur: function () {
         const editor = this as any;
         props.onBlur && onBlur(editor.html.get());
       },
       initialized: function (e) {
         const editor = this as any;
         // DON'T FOCUS for now.
         if (props.focusOnInitialize) {
           editor.events.focus();
           editor.selection.setAtEnd(editor.el);
           editor.selection.restore();
         }

         // editorRef.current = editor;
         if (props.enableMentions && editor) {
           var tribute = new Tribute({
             values: props.users.map((u) => ({
               key: u.label,
               value: u.id,
             })),
             noMatchTemplate: () => 'No user found',
             selectTemplate: function (item: any) {
               if (!item) {
                 return '';
               }

               return `<span class="fr-deletable fr-tribute mentioned-user" data-uid="${item.original.value}">@${item.original.key}</span>`;
             },
             requireLeadingSpace: true,
             lookup: 'key',
             fillAttr: 'key',
             itemClass: 'tribute-item',
           });
           if (editor) {
             tribute.attach(editor.el);
           }
         }

       },
     },
     attribution: false,
     placeholderText: placeholder,
     listAdvancedTypes: false, // disables the "roman" etc.
     fontSize: [12, 14, 16, 18, 20, 24, 28, 32],
     paragraphFormat: {
       N: 'Normal',
       H1: 'Heading 1',
       H2: 'Heading 2',
       H3: 'Heading 3',
       PRE: 'Code',
     },
     linkAlwaysBlank: true,

     toolbarButtons: {
       moreMisc: {
         buttons: tbtns,
         buttonsVisible: props.buttonsVisible || 8,
       },
       pluginsEnabled: [
         'table',
         'link',
         'lists',
         'image',
         'url',
         'colors',
       ],
     },
     imagePaste: props.disableImageOptions ? false : true,
     imageEditButtons: ['imageSize'],
     imageInsertButtons: ['imageBack', '|', 'imageUpload' /*, 'imageByURL'*/],
     quickInsertTags: [], // this disabled the "quick insert" functionality
     tableEditButtons: [
       'tableHeader',
       'tableRemove',
       '|',
       'tableRows',
       'tableColumns',
       '-',
       'tableCells',
       'tableCellBackground',
       'tableCellVerticalAlign',
       'tableCellHorizontalAlign',
     ],
   }}
 />

Version : 4.4.0
MacOS
Chrome

[pmasekito]

bump.

[Baztoune]

Well it seems we encountered the same issue on our project but I can't seem to get a minimal reproduction case yet

[Supaibo]

Same thing on our side.

[Baztoune]

It might be more related to the react-froala-wysiwyg instead of this core package. These issues look similar :

• Error two way binding react-froala-wysiwyg#408
• Cannot read properties of null (reading 'html') (Froala 4.4.0) react-froala-wysiwyg#410

[vedbhanushal1]

I downgraded to froala 4.3.1 but I am still facing same issue.
in my package.json

{
  ...
  "froala-editor": "^4.3.1",
  "react-froala-wysiwyg": "^4.3.1",
  ...
}

@rwankar are you facing issue in this version ?

[Supaibo]

@vedbhanushal1 you should remove caret to get the 4.3.1 version
https://www.geeksforgeeks.org/difference-between-tilde-and-caret-in-package-json/

[rwankar]

Right. Usually I also remove the node_modules and run npm i again.