React-data-grid: Build errors

[igoriok1994]

Hi,

I'm using TerserPlugin. After building app I've got errors from react-data-grid component.

ERROR in ./node_modules/rdg.v7/lib/Cell.js 10:19
Module parse failed: Unexpected token (10:19)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|     function handleCellClick() {
|         selectCell();
>         onRowClick?.(rowIdx, row, column);
|     }
|     function handleCellContextMenu() {
 @ ./node_modules/rdg.v7/lib/index.js 2:0-41 2:0-41

ERROR in ./node_modules/rdg.v7/lib/Row.js 15:128
Module parse failed: Unexpected token (15:128)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|         event.dataTransfer.dropEffect = 'copy';
|     }
>     className = clsx('rdg-row', `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, { 'rdg-row-selected': isRowSelected },
 rowClass?.(row), className);
|     // Regarding onDrop: the default in Firefox is to treat data in dataTransfer as a URL,
|     // and perform navigation on it, even if the data type used is 'text'.
 @ ./node_modules/rdg.v7/lib/index.js 3:0-39 3:0-39

ERROR in ./node_modules/rdg.v7/lib/DataGrid.js 69:23
Module parse failed: Unexpected token (69:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
|         - 2 // border width
|         - totalHeaderHeight
>         - (summaryRows?.length ?? 0) * rowHeight
|         - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
|     const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(clientHeight, rowHeight, scrollTop, rows
.length);
 @ ./node_modules/rdg.v7/lib/index.js 1:0-37 1:0-37

Last week everything was fine, but now after "NPM update" I have this error.
Help?

[igoriok1994]

Maybe this lib must be compiled and uploaded to NPM as ES5?
Btw, I'm using Babel 6, so I can't add "@babel/plugin-proposal-optional-chaining" plugin to my ENV.

[paveleremin]

There are should be two versions: modern es7 and es5

[yoavaviram]

I'm having the same issue.

[Alexmhack]

Any progress??

[robgwin]

FWIW I'm getting the exact same compile error with Babel 7
[email protected]
@[email protected]

Installing @babel/[email protected] did not help

[workatease]

FWIW I'm getting the exact same compile error with Babel 7
[email protected]
@[email protected]

Installing @babel/[email protected] did not help

yes , I still seeing the same error from the but the no error when I use it in the application code ?. it works
but webpack and babel is throwing error when I add r "react-data-grid": "^7.0.0-canary.17",
but no error in "react-data-grid": "^7.0.0-canary.16",

[mannamh]

I ran into the same issue. Any progress on this?

[r00tUSR]

I built my project with the latest create-react-app tool and the only thing that worked for me was mentioned in #2077 by sergeyt. I can provide detailed instructions if necessary.

[igoriok1994]

I built my project with the latest create-react-app tool and the only thing that worked for me was mentioned in #2077 by sergeyt. I can provide detailed instructions if necessary.

As workaround it would be good solution, but this bug must be fixed... I'm using canary-16 right now.
Strange that RGD developers not reading github issues... A lot of empty issues without any reply.

[jwallet]

my workaround was to build their solution reverting the changes they made in tsconfig file
https://github.com/adazzle/react-data-grid/commit/38a81b60fd96d253e01e59d8b8a01e3604668d66#diff-e5e546dd2eb0351f813d63d1b39dbc48
and published a temp version on my myget account, using it instead

[igoriok1994]

and published a temp version on my myget account, using it instead

Hmmm. Settings target (tsconfig) to ES5 or ES2015 wouldn't it be enough?

[r00tUSR]

and published a temp version on my myget account, using it instead

Hmmm. Settings target (tsconfig) to ES5 or ES2015 wouldn't it be enough?

It didn't have any effect on my project.

I don't know what magic create-react-app(CRA) scripts perform but changing the target it didn't seem to have any effect. Even though CRA created that tsconfig file, I'm not sure it was even using my settings at least for development using yarn start. Maybe it would respect it for build tasks?

I'm still fairly new to JS and react, so I may be doing something that's obviously stupid. Does anyone know how to tell what ES version of my app the browser is interpreting?

[GuyPaddock]

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

[amanmahajan7]

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