Uncaught TypeError: Cannot read properties of undefined (reading 'replace') in Syncfusion Gantt

Question

I'm using the GanttComponent (from @syncfusion/ej2-react-gantt) in my app inside one of my react stateless component functions since quite a long time without any issue.

My teammates keep changing other parts of the app (including the package.json modules) but nothing related to the gantt have changed in my app and now suddenly i'm getting this error from the syncfusion gantt's related vendor files (more exactly from the node_modules@syncfusion\ej2-base\src\util.js file)

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at setValue (util.js:84:1)
    at TreeGrid.TreeGridLocale (treegrid.js:250:1)
    at TreeGrid.preRender (treegrid.js:158:1)
    at TreeGrid.Component.appendTo (component.js:183:1)
    at GanttTreeGrid.renderTreeGrid (tree-grid.js:97:1)
    at GanttComponent.Gantt.renderTreeGrid (gantt.js:481:1)
    at GanttComponent.Gantt.renderGantt (gantt.js:408:1)
    at TaskProcessor.checkDataBinding (task-processor.js:72:1)
    at GanttComponent.Gantt.render (gantt.js:340:1)
    at GanttComponent.render (gantt.component.js:36:1)
    at GanttComponent.Component.appendTo (component.js:185:1)
    at GanttComponent.ComponentBase.renderReactComponent (component-base.js:66:1)
    at GanttComponent.ComponentBase.componentDidMount (component-base.js:49:1)
    at commitLifeCycles (react-dom.development.js:19814:1)
    at commitLayoutEffects (react-dom.development.js:22803:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at commitRootImpl (react-dom.development.js:22541:1)
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at commitRoot (react-dom.development.js:22381:1)
    at finishSyncRender (react-dom.development.js:21807:1)
    at performSyncWorkOnRoot (react-dom.development.js:21793:1)
    at react-dom.development.js:11089:1
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)
    at flushSyncCallbackQueue (react-dom.development.js:11072:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21199:1)
    at dispatchAction (react-dom.development.js:15660:1)

The error comes from a certain setValue function when trying to call nameSpace.replace() in its first line:

export function setValue(nameSpace, value, obj) {
    var keys = nameSpace.replace(/\[/g, '.').replace(/\]/g, '').split('.'); <--this line
    // eslint-disable-next-line
    var start = obj || {};
    // eslint-disable-next-line
    var fromObj = start;
    var i;
    var length = keys.length;
    var key;
    for (i = 0; i < length; i++) {
        key = keys[i];
        if (i + 1 === length) {
            fromObj[key] = value === undefined ? {} : value;
        }
        else if (isNullOrUndefined(fromObj[key])) {
            fromObj[key] = {};
        }
        fromObj = fromObj[key];
    }
    return start;
}

In the moment when i get the error , that function is being called from the TreeGrid.prototype.TreeGridLocale (in @syncfusion\ej2-treegrid\src\treegrid\base\treegrid.js):

TreeGrid.prototype.TreeGridLocale = function () {            
        var locale = L10n.locale;
        var localeObject = {};
        setValue(this.locale, {}, localeObject); <-- this line
        var gridLocale;
        gridLocale = {};
        gridLocale = getObject(this.locale, locale);
        var treeGridLocale;
        treeGridLocale = {};
        treeGridLocale = getObject(this.getModuleName(), gridLocale);
        setValue('grid', treeGridLocale, getObject(this.locale, localeObject));
        L10n.load(localeObject);
    };

As you can see there, the first parameter passed to the setValue is this.locale (as the nameSpace first parameter). I've been looking in the whole treegrid.js file to try find where exactly the this.locale is supposed to be affected but i couldn't guess.

And i wonder what could affect those vendors so that this.locale won't get affected properly!

Answer 1

The reported issue was only replicated when the locale value was set to null. We wanted to know if the issue was replicated for you due to the same cause or if you were changing the locale value dynamically after setting it to null. We request that you set the locale value, and we have provided a locale sample for your reference.

Sample: https://stackblitz.com/edit/localization-ptckpw-jwfaqu-86hg2u?file=index.js