React Tabulator giving error which is not recognizable

user_15883956 0
Viewed 194

I am new to react and react tabulator. I am getting an error which I am not understanding.

This is my react tabulator code:

render() {
    const options = {
      
      pagination: 'local',
      paginationSize: 5,
      layout: 'fitDataFill',
      
    };

    const ReportColumns = [
      {
        title: 'TDC',
        field: 'TDC',
        minWidth: 20,
        headerSort: false,
        headerFilter: 'input',
        headerFilterPlaceholder: 'search...',
      },
    ];

<ReactTabulator
          data={this.state.reportList}
          columns={ReportColumns}
          options={options}
          // rowClick={this.rowClick}
          id="reportGrid"
        />

I am getting reportList from this function: I am getting value in reportList from the backend and adding it in reportList in the form of an array and populating it

getTableValue = () => {
    this.setState({ dataLoading: true });

    axiosAPI.post('api/observation/GetTableValue').then(response => {
      var rows = [];

      console.log('values for response:' + JSON.stringify(response.data));

      for (var i in response.data) {
        var rowdata = response.data[i];
        var ID = ++i;

        rows.push({
          ID: ID,
          OrgUnit: rowdata.OrgUnit,
          TDC: rowdata.TDC,
          CustCode: rowdata.CustCode,
          CustName: rowdata.CustName,
          DestCode: rowdata.DestCode,
          EMV: rowdata.EMV,
          Service: rowdata.Service,
          SPCCode: rowdata.SPCCode,
          SPCode: rowdata.SPCode,
          Remarks: rowdata.Remarks,
          Stage: rowdata.Stage,
          Cost: rowdata.Cost,
          SAPUpdate: rowdata.SAPUpdate,
          Active: rowdata.Active,
          CreatedBy: rowdata.CreatedBy,
          CreatedOn: rowdata.CreatedOn,
          UpdatedBy: rowdata.UpdatedBy,
          UpdatedOn: rowdata.UpdatedOn,
        });
        //this.setState({ reportList: rows });
      }
      this.setState({ reportList: rows });

      this.setState({ dataLoading: false });
    });
  };

I am inititializing reportList as an array in the state as so:

reportList: [],

This is the error I am getting:

./node_modules/tabulator-tables/dist/js/tabulator_esm.js 6792:93
Module parse failed: Unexpected token (6792:93)
You may need an appropriate loader to handle this file type.
| function progress(cell, onRendered, success, cancel, editorParams) {
|   var element = cell.getElement(),
>       max = typeof editorParams.max === "undefined" ? element.getElementsByTagName("div") 
 [0]?.getAttribute("max") || 100 : editorParams.max,
|       min = typeof editorParams.min === "undefined" ? element.getElementsByTagName("div") 
 [0]?.getAttribute("min") || 0 : editorParams.min,
|       percent = (max - min) / 100,

enter image description here

I am not understanding what the error is and hence not able to resolve. Please help me in understanding the error and resolving it. Please help

tabulator reactjs javascript
1 Answers

The problem is in tabulator-tables, a dependency of react-tabulator. The error message is telling you that it was unable to parse the module itself, which, unless you went in and edited it, is not your code.

I was able to reproduce the error locally by trying to install and run the react-tabulator live demo. You can try the same by downloading the sandbox using the upper left hand menu:

codesandbox export

Unzip the downloaded file into a new directory and then run yarn install; yarn start or the npm equivalents if you prefer.

The error message you received is an accurate description of the problem. Indeed, using dummy values for max and min in node_modules/tabulator-tables/dist/js/tabulator_esm.js fixes the issue (with loss of functionality, obviously):

function progress(cell, onRendered, success, cancel, editorParams){
    var element = cell.getElement(),
    // max = typeof editorParams.max === "undefined" ? ( element.getElementsByTagName("div")[0]?.getAttribute("max") || 100) : editorParams.max,
    max = 100,
    // min = typeof editorParams.min === "undefined" ? ( element.getElementsByTagName("div")[0]?.getAttribute("min") || 0) : editorParams.min,
    min = 0,

That said, I'm stumped as to what the breaking difference between our local environments and codesandbox are. I copied the live demo I referenced above verbatim, including package.json, so aside maybe from a different node version, there shouldn't be a difference, to the best of my knowledge. There's certainly nothing wrong with the line where Unexpected token is reported.

What I would recommend here is filing an issue against react-tabulator at their repository. Rather than referencing your code, which has a lot of unrelated stuff in it, report, as I did above, that you downloaded their live demo verbatim, and it didn't run on your machine with such and such error message. Reference this answer if you like. Hopefully they will have some clue that's eluding me.

user_121622580
Related