RangeError: Maximum call stack size exceeded Typescript with Angular and DevExtreme

Question

I need help with this error. the context is as follows

DevExtreme Version: 22.2.6

Angular Version: 15.2.0

Node Version: 18.16.0

I am using an infrastructure of micro front ends in my solution, the main one that will be deployed on is called "mf-shell" and my other micro front end that will basically run a data grid using DevExtreme is called "mf- user"

I am using an already created test API only to verify CRUD requests on my dataset, the API documentation is this: https://young-sands-07814.herokuapp.com/docs/

The problem occurs in the "mf-user" since despite rendering correctly in the corresponding port (4201), in the "mf-shell" it sends me the mentioned error (Port 4200)

Port 4200 mf-shell Port 4201 mf-user works

mf-user/user

user.component.html

<div class="long-title">
  <h3>Usuarios</h3>
</div>

<dx-data-grid
    id="gridContainer"
    [dataSource]="myDataSource"
    (onExporting)="onExporting($event)">

      <dxo-editing
        [allowAdding]="true"
        [allowUpdating]="true"
        [allowDeleting]="true"
        [useIcons]="true"
        mode="popup">
          <dxo-popup [showTitle]="true" title="Información"></dxo-popup>
          <dxo-texts
            addRow="Añadir"
            cancelAllChanges="Descartar cambios"
            cancelRowChanges="Cancelar"
            confirmDeleteMessage="Seguro quiere eliminar el registro?"
            confirmDeleteTitle="Confirmar Accion"
            deleteRow="Eliminar"
            editRow="Editar"
            saveAllChanges="Guardar cambios"
            saveRowChanges="Guardar"
            >
        </dxo-texts>
      </dxo-editing>

    <dxo-search-panel [visible]="true" placeholder="Buscar..."></dxo-search-panel>

    <dxo-header-filter [visible]="true" [texts]="textosHeaderFilter"></dxo-header-filter>

    <dxo-filter-row [visible]="true" betweenStartText="Inicio" betweenEndText="Termina" applyFilterText="Aplicar Filtro" resetOperationText="Limpiar">
      <dxo-operation-descriptions
        startsWith="Empieza con"
        between="Entre dos valores"
        contains="Contiene a"
        endsWith="Termina en"
        equal="Es igual a"
        greaterThan="Mayor que"
        greaterThanOrEqual="Mayor o igual que"
        lessThan="Menor que"
        lessThanOrEqual="Menor o igual que"
        notContains="No tiene"
        notEqual="Es diferente de"
        >
      </dxo-operation-descriptions>
    </dxo-filter-row>

    <dxo-group-panel [visible]="true" emptyPanelText="Arrastre para agrupar"></dxo-group-panel>

    <dxo-selection mode="multiple"></dxo-selection>
    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-grouping [autoExpandAll]="true" [texts]="textosGrouping"></dxo-grouping>


      <dxo-export
        [enabled]="true"
        [formats]="['xlsx','pdf']"
        [allowExportSelectedData]="true"
        [texts]="textosExport"
      ></dxo-export>

 </dx-data-grid>

user.component.ts

 import { Component, OnInit } from '@angular/core';
 import {UserService} from '../user/services/user.service'

 import { exportDataGrid as exportDataGridpdf} from 'devextreme/pdf_exporter';
 import { jsPDF } from 'jspdf';


 import { saveAs } from 'file-saver';
 import {Workbook} from 'exceljs';
 import { exportDataGrid as exportDataGridexcel} from 'devextreme/excel_exporter';
 import CustomStore from 'devextreme/data/custom_store';


@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent {
  myDataSource:any;

  textosHeaderFilter = {
    cancel:'Cancelar',
    emptyValue:'Vacio',
    ok:'Aceptar'
  }
  textosGrouping ={
    groupByThisColumn:'Agrupar por esta columna',
    groupContinuedMessage:'Continua en la pagina anterior',
    groupContinuesMessage:'Continua en la siguiente pagina',
    Ungroup:'Desagrupar',
    ungroupAll:'Desagrupar todo'
  }
  textosExport={
    exportAll:"Exportar todo",
    exportSelectedRows:'Exportar Seleccionados',
    exportTo:"Exportar"
  }
  constructor(private service: UserService) {
    this.myDataSource = new CustomStore({
      key: "id",
      load: () => this.service.getDataSource(),

  /*
      insert: (values) => this.service.create(values).toPromise()
      .then(data => {
        this.myDataSource = data;
      })
      .catch(error => {}),
  */

      })
  }

  //Para exportar
  onExporting(e) {
    if (e.format === 'pdf') {
      const doc = new jsPDF();
      exportDataGridpdf({
      jsPDFDocument: doc,
      component: e.component,
      indent: 5,
    }).then(() => {
      doc.save('GridUsuarios.pdf');
    });
  }

    else if (e.format === 'xlsx') {
    const workbook = new Workbook();
    const worksheet = workbook.addWorksheet('Usuarios');

    exportDataGridexcel({
      component: e.component,
      worksheet,
      autoFilterEnabled: true,
    }).then(() => {
      workbook.xlsx.writeBuffer().then((buffer) => {
        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'GridUsuarios.xlsx');
      });
    });
    e.cancel = true;
  }
    }

 }

user.service.ts

 import { Injectable } from '@angular/core';
 import {HttpClient, HttpParams} from '@angular/common/http'
 import { lastValueFrom } from 'rxjs';
 import {User,CreateUserDTO,UpdateUserDTO} from '../models/user.model'

@Injectable({
  providedIn: 'root'
})
export class UserService {

 private apiURL = 'https://young-sands-07814.herokuapp.com'

  constructor(private http: HttpClient) {

  }

  /* Método para acceder a dataSource
    getDataSource() {
      return this.http.get<User[]>(`${this.apiURL}/api/products/`)
  }
*/

  create(dto: CreateUserDTO){
    return this.http.post<User>(this.apiURL,dto);
  }


  update (id: string,dto: any) {
    return this.http.put<User>(this.apiURL+id,dto);
  }

  delete(id:string) {
    return this.http.delete<boolean>(this.apiURL+id);

  }

  async getDataSource() {
    try {
      const response = await lastValueFrom(this.http.get<User[]>(`${this.apiURL}/api/products/`));
      return response;
    } catch (error) {
      // Manejar el error si ocurre
      throw error;
    }
  }

  }

I think the problem is that the DevExtreme "CustomStore" asks in its structure that the response to the invoked methods be a Promise and not an Observable, however configuring it as observable (commented code) fixes the error in the mf-shell but in the mf-user throws a syntax error due to the DevExtreme structure itself.

I would like a solution to fix the problem in the mf-shell