React-data-grid: Not compiling after install

[ad798]

./node_modules/react-data-grid/lib/DataGrid.js 102:37
Module parse failed: Unexpected token (102:37)
File was processed with these loaders:
./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
| const clientHeight = height - 2 // border width
totalHeaderHeight - (summaryRows?.length ?? 0) * rowHeight - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
| const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length);
| /**

As you can see this error shows up when trying to run and compile the example in the docs. Thanks for your help.

[sergeyt]

@ad798 you have to adjust babel config to support es2020, react-data-grid by some reason targets es2020

[igoriok1994]

@ad798 you have to adjust babel config to support es2020, react-data-grid by some reason targets es2020

IMHO, It is not possible for everyone, eg I'm using Babel 6 and can't support ES2020. Big project, a lot of dependencies.
It will be painful to update ENV to Babel 7 (some day it will happen, but not soon). So I believe, that this lib must be compiled to ES5 for compatibility.

[ad798]

Thank you @sergeyt. I have not tried it yet but could be a solution. I'll keep this issue open to get more answers.
@igoriok1994 For sure is a good idea.

[sergeyt]

@ad798 as workaround you can fork this repo, change target in tsconfig.json to ES2015 at least. put compiled files to git and use your fork as npm dependency. we are using this way to use this library with custom fixes

[sergeyt]

@igoriok1994 agree this lib should be compiled at least to ES2015. @malonecj WDYT?

[igoriok1994]

Btw, related with #2074

[sprutner]

I also have this issue after following the quick start guide.

[jhoneybee]

@sprutner

• configure webpack include
• or editor tsconfig.json to "target": "es5".
• or use the version I built lowered the target.

// lock  version 7.0.0-canary.17.5
npm install react-data-grid-temp

if you use react-data-grid-temp source code here https://github.com/jhoneybee/react-data-grid

[Lakshmy84]

Any udates on this thread. Even I am facing the same issue
./node_modules/react-data-grid/lib/DataGrid.js 136:37
Module parse failed: Unexpected token (136:37)
You may need an appropriate loader to handle this file type.
| var totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
| var clientHeight = height - 2 // border width

• totalHeaderHeight - (summaryRows?.length ?? 0) * rowHeight - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
  |
  | var _getVerticalRangeToRe = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length),

[diez-esteban]

Hi everyone. Has anyone managed to resolve this? I'm getting the same error even trying to set up the simplest getting started example.
Also, which would be the right version to user for 'react-data-grid-addons'? Thank you

[jhoneybee]

Hi everyone. Has anyone managed to resolve this? I'm getting the same error even trying to set up the simplest getting started example.
Also, which would be the right version to user for 'react-data-grid-addons'? Thank you

configure your webpack

// babel-loader
{
    include: [/react-data-grid/]
 },

[igoriok1994]

Hi everyone. Has anyone managed to resolve this? I'm getting the same error even trying to set up the simplest getting started example.
Also, which would be the right version to user for 'react-data-grid-addons'? Thank you

configure your webpack

// babel-loader
{
    include: [/react-data-grid/]
 },

Probably this will work only if you are using Babel 7.
With Babel 6 error will be the same. I'll test it next week.

[diez-esteban]

Thank you @igoriok1994 , I appreciate your help!
About the addons, which version should work with react-data-grid?

[igoriok1994]

About the addons, which version should work with react-data-grid?

I have no idea. In my project I'm using react-data-grid 4 with same version addons (for old modules).
For new modules I've created custom wrapper with react-data-grid 7 canary16 (as npm alias) without addons. For all custom features you can create your own formatters/editors (so did I)

[diez-esteban]

Hi everyone. I'm a newbie in react. Created my app using create-react-app. Can anyone give me a hand and walk me through the process of setting up webpack?

Also tried downgrading to react-data-grid v5.0.1 and got the same error as I did with the latest version.

Any help will be appreciated. Thank you.

Full error trace:

/Users/xxx/node_modules/react-data-grid/lib/DataGrid.js 102:37
Module parse failed: Unexpected token (102:37)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
|   const clientHeight = height - 2 // border width
>   - totalHeaderHeight - (summaryRows?.length ?? 0) * rowHeight - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
|   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length);
|   /**

[igoriok1994]

Also tried downgrading to react-data-grid v5.0.1 and got the same error as I did with the latest version.

Just remove react-data-grid, delete node_modules, then install install it again (v7 canary 16 or v5 or v6)
Then do npm install

[diez-esteban]

Hi @igoriok1994 , thanks. I Followed these steps:

• Uninstalled react-data-grid by running npm uninstall react-data-grid --save
• Checked react-data-grid is not on node_modules: OK
• Installed version 6.10 --> npm install [email protected]
• Run my app and got the same error

NOTE: my app was created with create-react-app

/Users/xxx/node_modules/react-data-grid/lib/DataGrid.js 102:37
Module parse failed: Unexpected token (102:37)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
|   const clientHeight = height - 2 // border width
>   - totalHeaderHeight - (summaryRows?.length ?? 0) * rowHeight - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
|   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows.length);
|   /**

This how my package.json file looks now.

{
  "name": "ordssl",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "formik": "^2.1.4",
    "local-storage-fallback": "^4.1.1",
    "moment": "^2.27.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-data-grid": "^6.1.0",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-select": "^3.1.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "rsuite": "^4.7.5",
    "yup": "^0.29.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

[workatease]

Hi guys,
I was able to solve this issue by configuration my webpack to include the react-data-grid as mentioned in README.md in Webpack configuration with babel-loader

[igoriok1994]

Hi guys,
I was able to solve this issue by configuration my webpack to include the react-data-grid as mentioned in README.md in Webpack configuration with babel-loader

It works only with Babel 7.

[kkokiev]

I have the same issue, i'm using create-react-app with the typescript template.
I will be grateful for advice on how to fix it.

[langebangen]

Seems to be an issue in 7.0.0-canary.16 and forward. Installing [email protected] solves this issue for me, so I guess I will stay at this version until the issue is solved

[GuyPaddock]

Also see: https://github.com/adazzle/react-data-grid/issues/2091#issuecomment-693166142

[HeavenlyEntity]

Seems to be an issue in 7.0.0-canary.16 and forward. Installing [email protected] solves this issue for me, so I guess I will stay at this version until the issue is solved

Yes this will fix the issue. Can a contributer please revert the commit updating the ES compliance that is too new for even the react apps to even use this. As you guys are getting a lot more user base due to mui-datatables breaking styles.

[amanmahajan7]

We published a new bundle to address this issue. Please let us know if it is still not working for anyone