After upgrading to 29.1.33, getting error Uncaught TypeError Cannot read properties of undefined (reading 'enqueueForceUpdate')

[Praveen Lobo]

Hi Team,

Getting the attached error.

Below is the code.

<ColumnDirective field='postedFiles' headerText='' width='1%' textAlign="Left" edit={this. quoteUpload  } />

quoteUpload = {

    create: () => {

        this.quoteUploadElem = document.createElement('input');

        return this.quoteUploadElem;

    },

    destroy: () => {

        this.quoteUploadObj.destroy();

    },

    read: () => {

        return this.quoteUploadObj.text;

    },

    write: () => {

        this.quoteUploadObj = new UploaderComponent({

            asyncSettings: {

                saveUrl: 'Invoice/SubmitFiles',

                removeUrl: ''

            },

            success: this.onUploadSuccess = this.onUploadSuccess.bind(this),

            failure: this.onUploadFailure = this.onUploadFailure.bind(this),

            removing: this.removing = this.removing.bind(this),

            clearing: this.clearing = this.clearing.bind(this),

            autoUpload: false,

            id: "postedFiles",

            name: "postedFiles"

        });

        this.quoteUploadObj.appendTo(this.quoteUploadElem);

    }

}

static quoteUploadElem: HTMLElement;

static quoteUploadObj: UploaderComponent;

Attachment: UploadError_c6dbdad7.zip

[Yohapuja Selvakumaran]

Hi Praveen,

Thank you for reaching out to us.

We have carefully tested the reported issue in our environment using a similar configuration. However, we were unable to replicate the issue, and the uploader component is functioning as expected without any console errors.

To assist you in resolving this, we have provided a working sample for your reference:

Sample:  https://stackblitz.com/edit/react-qahe8hjo?file=index.js

Based on the provided code, the issue might be caused by improper handling of instance properties, leading to undefined errors. Please try the following modifications to resolve the issue:

The properties quoteUploadElem and quoteUploadObj should be instance properties rather than static. Static properties belong to the class itself and may not be correctly accessed in instance methods.

  this.quoteUploadElem = null;
        this.quoteUploadObj = null;

If quoteUploadObj is undefined when calling .destroy(), a runtime error will occur. Adding a null check ensures that .destroy() is only called when the object exists.

 destroy: () => {
            if (this.quoteUploadObj) {
                this.quoteUploadObj.destroy();
                this.quoteUploadObj = null;
            }
        },

The read() method currently assumes quoteUploadObj is always available. If it is not initialized, attempting to access its properties will result in an error.

        read: () => {
            return this.quoteUploadObj ? this.quoteUploadObj.text : '';
        },

  

 

If the issue persists after making these changes, we kindly request additional details to help us diagnose the problem further:

• Are you using the uploader inside another component, or is it a standalone uploader component?

• If it is inside another component, does the error occur when interacting with the parent component?

• Does the error occur immediately when rendering the uploader, or only after performing specific actions (e.g., file selection, upload, or removal)?

• If possible, could you share a minimal runnable sample replicating the issue?

We appreciate your cooperation and look forward to your response. Please let us know if you need any further assistance.

Regards,

Yohapuja S