Compile error in brand new clean react app.

[bwilson]

I created a brand new react app with create-react-app, and then installed react-data-grid. I then added the import to App.js (import ReactDataGrid from 'react-data-grid';) and immediately got a compile error:

Failed to compile.

./node_modules/react-data-grid/lib/DataGrid.js 101:39
Module parse failed: Unexpected token (101:39)
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 headerRowsCount = enableFilters ? 2 : 1;
>   const summaryRowsCount = summaryRows?.length ?? 0;
|   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
|   const {

What steps do I need to take to get this working?

Here is my package.json file:

    "name": "trash",
    "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",
        "react": "^16.13.1",
        "react-data-grid": "^7.0.0-canary.19",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.2"
    },
    "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"
        ]
    }
}

Thank you!

[jhoneybee]

Duplicate #2077

[igoriok1994]

Compiled canary.20 as ES2015

npm install react-data-grid-igvi

[bwilson]

Thanks for posting.

I tried your build and it works. For anyone else struggling to get this working, note that the following two steps are necessary:

1. Import the css:
   import 'react-data-grid/dist/react-data-grid.css';

2. Reference the rows array directly as opposed to using a getter as shown in the documentation:

<ReactDataGrid
    columns={columns}
    rows={rows}
    // rowGetter={i => rows[i]}
    rowsCount={3}
/>

I was however unable to get it to work with react-data-grid-addons. I got this error:

Compiling...
<project root>/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: ENOENT: no such file or directory, stat '/initrd.img'

In #2077 I read that react-data-grid requires babel configuration for es2020. I'm not sure how to do that, but I tried adding the example babel.config.json file suggested at https://github.com/adazzle/react-data-grid to my project root. It had no noticeable effect. I would appreciate any help - thanks in advance.

[pstephenwille]

Same here with no work around.
This makes me nervous react-data-grid@7.0.0-canary.20, I don't want to be a guinea pig.
I'm using CRA and can not eject webpack.
Is this not compatible with out-of-the-box CRA app?

[dattabhujbal]

I am facing same issue for version react-data-grid@7.0.0-canary.20,even tried to change babel.config.json and webpack.config as well ,But No luck ,Is there any way around,Or I'll need to use same old versioned liabrary :(

[mookiejones]

Fwiw,

Im no expert by any means. but these are the steps i took to get it working.

"dependencies": {
"clsx": "^1.1.1",
"node-fetch": "^2.6.0",
"react": "next",
"react-data-grid": "^7.0.0-canary.22",
"react-data-grid-addons": "^7.0.0-alpha.24",
"react-dom": "next",
"react-scripts": "3.4.3",
"typescript": "~3.7.2"
},
"scripts": {
 "build-css": "node-sass-chokidar src/ -o src/",
 "build-js": "react-scripts build",
 "build": "npm-run-all build-css build-js ",
 "eject": "react-scripts eject",
 "start": "npm-run-all -p watch-css start-js",
 "start-js": "react-scripts start",
 "test": "react-scripts test",
 "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
 "watch-css": "yarn run build-css && node-sass-chokidar src/ -o src/ --watch --recursive"
},
"eslintConfig": {
  "extends": "react-app"
},
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 2 chrome versions",
    "last 2 edge versions",
    "last 2 firefox versions",
    "last 2 safari versions"
  ]
},
"sideEffects": [
  "*.css",
  "*.scss"
],
"devDependencies": {
  "@types/node": "^14.6.4",
  "@types/node-fetch": "^2.5.7",
  "@types/react": "^16.9.49",
  "@types/react-dom": "^16.9.8",
  "node-sass-chokidar": "^1.5.0",
  "npm-run-all": "^4.1.5"
}

Once i did this, it started complaining about items that were in a testing library

TypeScript error in  /node_modules/@testing-library/dom/node_modules/pretty-format/build/index.d.ts(7,13):
'=' expected.  TS1005

     5 |  * LICENSE file in the root directory of this source tree.
     6 |  */
  >  7 | import type * as PrettyFormat from './types';
       |             ^
     8 | /**
     9 |  * Returns a presentation string of your `val` object
    10 |  * @param val any potential JavaScript object

I removed those testing libraries and everything seems to be working now.

if anyone can provide feedback its appreciated as im clearly just blindly adding and removing things.

[HeavenlyEntity]

Attention all contributors all these issues in your queue would go away if you didn't change the compling interpretation and modules! Please remove it! Otherwise your library out of the box is broken for all CLI react project creation for all devs. Thanks!

Otherwise the react prefix can be taken off the name of this library. Downgrade to standard ES6 like all libraries please? 😁

To answer everyone's questions React projects made in the CLI otherwise known as Create React App (CRA) cannot modify webpack as its automatically configured in node_modules for you as react_scripts relys on that file location for startup of the dev server. Only way would be to override the webpack.config in the dist folder where react_scripts also reside. It is subject to break and change from running npm but 🤔. This version of this library is broken. We all need to vote a downgrade.

[lucamorelli]

I had the same problem, and looks like I found a cleaner solution using react-app-wired, customize-cra adding the babel plugins @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator

I wrote how to do this here https://stackoverflow.com/questions/63958689/error-serving-react-app-using-react-app-wired/
hope helps others

[amanmahajan7]

We have published a new bundle and this issue should be resolved now. Feel free to open a new issue if there are further problems.
https://codesandbox.io/s/winter-firefly-gqltn?file=/src/App.js

[danielpza]

I'm having a similar issue

ERROR in ./node_modules/react-data-grid-canary/node_modules/read/lib/read.js
Module not found: Error: Can't resolve 'readline' in '/node_modules/react-data-grid-canary/node_modules/read/lib'

....

ERROR in ./node_modules/react-data-grid-canary/node_modules/node-gyp/bin/node-gyp.js 1:0
Module parse failed: Unexpected character '#' (1:0)
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.
> #!/usr/bin/env node
| 'use strict';
| 
 @ ./node_modules/react-data-grid-canary/node_modules/@npmcli/run-script/lib/make-spawn-args.js 23:26-69
 @ ./node_modules/react-data-grid-canary/node_modules/@npmcli/run-script/lib/run-script-pkg.js
 @ ./node_modules/react-data-grid-canary/node_modules/@npmcli/run-script/lib/run-script.js
 @ ./node_modules/react-data-grid-canary/lib/install.js
 @ ./node_modules/react-data-grid-canary/lib sync ^\.\/.*\.js$
 @ ./node_modules/react-data-grid-canary/lib/npm.js

$ npm ls react-data-grid-canary
└── react-data-grid-canary@npm:npm@7.5.4

nvm I messed up the version