React-data-grid: React Data grid throwing error on compile-./node_modules/react-data-grid/lib/DataGrid.js 136:37 Module parse failed: Unexpected token (136:37)

[Lakshmy84]

Version used is "react-data-grid": "^7.0.0-canary.16",

npm install works fine, but on compiling, we are getting the below error.

./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),

[gprasad0]

Same issue here! We would have to upgrade babel so that it handles es2020

[mannamh]

Does upgrading babel helped? anyone tried?

[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.

[Yuri2b]

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.

If you please)

[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.

If you please)

I used yarn so that's what these instruction will show. npm is probably fine as well.

1. fork this repo
2. git clone to your machine
3. remove /lib and /dist from .gitignore
4. run yarn to install modules
5. change target to es2015 in the tsconfig file
6. run yarn build
7. run yarn postbuild to generate css files
8. git add and commit all the new files
9. push everything back up to your repo
10. uninstall react-data-grid from your project
11. install from your own reop using yarn add <git remote url>#<branch/commit/tag>
12. profit!

[yazilimmesut]

yarn build return this error:
$ tsc
$ node tools/buildStylesheets.mjs

import { promises as fs } from 'fs';
^

SyntaxError: Unexpected token {
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[r00tUSR]

@yazilimmesut I'll have to check my command history to make sure I didn't do some step not in those instructions. In the mean time feel free to try installing the one I built and pushed to my repo. https://github.com/r00tUSR/react-data-grid

Full disclosure: I'm still learning JS/react so I don't really know what I'm doing. Just trying to help, based on what I learned this weekend

[Yuri2b]

@r00tUSR I solved this issue by making npm run eject and adding this babel plugins to config/webpack.config.js:

            ...
            // Process any JS outside of the app with Babel.
            // Unlike the application JS, we only compile the standard ES features.
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                // this plugins section:
                plugins: [
                  require.resolve("@babel/plugin-proposal-nullish-coalescing-operator"),
                  require.resolve("@babel/plugin-proposal-optional-chaining"),
                ],
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },
                  ],
                ],
              ...

I used create-react-app too.
HelloWorld example is built without errors now.

[29shubham29]

Can anyone tell how to integrate your current project with babel and support with es2020.
I am currently stuck in the same issue.

[GuyPaddock]

@29shubham29 I struggled with this for a bit too. I am using Webpack with Babel; if you are too, read on.

At first, I _thought_ I needed to upgrade to Babel v7, install babel-preset-es2020 and add es2020 to the presets of my babel.config.js, but this is incorrect and resulted in the error:

Error: Plugin/Preset files are not allowed to export objects, only functions.
In node_modules/babel-preset-es2020/index.js

This is because babel-preset-es2020 is for Babel v6 and hasn't been maintained in 4 years. Instead, it looks like babel-env for Babel v7 can already natively handle ES2020.

The trick, though, is that you need to instruct Webpack not to parse the react-data-grid release as ES5 but instead ask it to run the sources through the ES2020 to ES5 transpiler provided by babel-env. To do this -- as touched on briefly at the top of the README -- add this to your Webpack config:

module.exports = {
  // ... lines omitted ...
  module: {
    rules: [
      {
        test:     /\.js$/,
        exclude:  /node_modules[/\\](?!react-data-grid[/\\]lib)/,
        use:      'babel-loader'
      }
     // ... lines omitted ...
  }  
  // ... lines omitted ...
}

This ensures that JS files sourced from node_modules are passed-through as ES5 _except_ for RDG, which is transpiled from ES2020 to ES5.

I also mentioned you'll want to be running Babel v7. If you are running Babel v6, you can try upgrading by removing all @babel dependencies from your package.json and then adding them again with yarn add or npm add. For example:

  yarn remove \
    "@babel/cli" \
    "@babel/core" \
    "@babel/plugin-proposal-class-properties" \
    "@babel/preset-env" \
    "@babel/preset-react" \
    "babel-loader"

  yarn add --dev \
    "@babel/cli:^7" \
    "@babel/core:^7" \
    "@babel/plugin-proposal-class-properties:^7" \
    "@babel/preset-env:^7" \
    "@babel/preset-react:^7" \
    "babel-loader:^8"

Note that babel-loader v8 is required when using Babel v7, since babel-loader v7 depends on Babel v6 (yes, it's counter-intuitive).

[vjpr]

@GuyPaddock Do you mean to say include instead of exclude?

        exclude:  /node_modules[/\\](?!react-data-grid[/\\]lib)/,

[kalpeshparakh]

Hello, can we make this working without ejecting create-react-app?

The same works, if I build and then serve, i.e. npm run build and then serve the build folder. But it doesnot work when i do npm start directly....

[vjpr]

@kalpeshparakh

_react-data-grid.craco.plugin.js_

const {getLoaders, loaderByName, addBeforeLoader} = require('@craco/craco')

module.exports = {
  overrideWebpackConfig: ({
    webpackConfig,
    cracoConfig,
    pluginOptions,
    context: {env, paths},
  }) => {
    const loader = {
      test: /\.js$/,
      include: /node_modules\/react-data-grid\/lib/,
      use: {
        loader: require.resolve('babel-loader'),
        options: {
          presets: ['@babel/preset-react', {}],
        },
      },
    }
    addBeforeLoader(webpackConfig, loaderByName('babel-loader'), loader)
    return webpackConfig
  },
}

_craco.config.js_

module.exports = function ({env, paths}) {

    plugins: [
      // Enable for react-data-grid@7
      {plugin: reactDataGrid, options: {}},
    ],

}

[kalpeshparakh]

@vjpr

sorry i didnt understand craco from the reply, I am using create-react-app typescript version, quite new to it

[vjpr]

@kalpeshparakh https://github.com/gsoft-inc/craco

[kalpeshparakh]

@kalpeshparakh https://github.com/gsoft-inc/craco

@kalpeshparakh

_react-data-grid.craco.plugin.js_

const {getLoaders, loaderByName, addBeforeLoader} = require('@craco/craco')

module.exports = {
  overrideWebpackConfig: ({
    webpackConfig,
    cracoConfig,
    pluginOptions,
    context: {env, paths},
  }) => {
    const loader = {
      test: /\.js$/,
      include: /node_modules\/react-data-grid\/lib/,
      use: {
        loader: require.resolve('babel-loader'),
        options: {
          presets: ['@babel/preset-react', {}],
        },
      },
    }
    addBeforeLoader(webpackConfig, loaderByName('babel-loader'), loader)
    return webpackConfig
  },
}

_craco.config.js_

module.exports = function ({env, paths}) {

    plugins: [
      // Enable for react-data-grid@7
      {plugin: reactDataGrid, options: {}},
    ],

}

@vjpr
Can you please suggest something on this:
reactDataGrid is not defined

[kalpeshparakh]

use:      'babel-loader'

Hi @GuyPaddock ,

I tried vjpr way, but not getting any success, can you please let me know if I am missing anything, Below is my code:

craco.config.js ->

const reactDataGrid = require("./react-data-grid.craco.plugin");

module.exports = {
plugins: [
// Enable for react-data-grid@7
{ plugin: reactDataGrid, options: {} },
],
};

react-data-grid.craco.plugin.js ->

const { getLoaders, loaderByName, addBeforeLoader } = require("@craco/craco");

module.exports = {
overrideWebpackConfig: ({
webpackConfig,
cracoConfig,
pluginOptions,
context: { env, paths },
}) => {
const loader = {
test: /.js$/,
include: /node_modules/\/,
use: {
loader: require.resolve("babel-loader"),
options: {
presets: ["@babel/preset-react", {}],
},
},
};
addBeforeLoader(webpackConfig, loaderByName("babel-loader"), loader);
console.log(webpackConfig);
return webpackConfig;
},
};

pakage.json ->

"start": "craco start ",

Help much appreciated

[kalpeshparakh]

Hi @vjpr ,

Thanks for your help,

I was able to solve the issue by below solution:

craco.config.js ->

const reactDataGrid = require("./react-data-grid.craco.plugin");

module.exports = {
plugins: [
// Enable for react-data-grid@7
{ plugin: reactDataGrid, options: {} },
],
};

react-data-grid.craco.plugin.js ->

const { getLoaders, loaderByName, addBeforeLoader } = require("@craco/craco");

module.exports = {
overrideWebpackConfig: ({
webpackConfig,
cracoConfig,
pluginOptions,
context: { env, paths },
}) => {
const loader = {
test: /.js$/,
exclude: /node_modules/\/,
use: {
loader: require.resolve("babel-loader"),
options: {
plugins: [
require.resolve(
"@babel/plugin-proposal-nullish-coalescing-operator"
),
require.resolve("@babel/plugin-proposal-optional-chaining"),
],
presets: ["@babel/preset-react", {}],
},
},
};
addBeforeLoader(webpackConfig, loaderByName("babel-loader"), loader);
console.log(webpackConfig);
return webpackConfig;
},
};

package.json ->

"start": "craco start"

[dvelasquez25]

Does anyone knows how to fix this issue for Next.js? I've been trying to make it work following the README and the Next.js docs on how to Customize Webpack Config and how to Customizing Babel Config.

After following the steps from all the sources mentioned above I ended up with the following files

//babel.config.json
{
  "presets": [
    [
      "next/babel",
        {
          "@babel/env": {
            "bugfixes": true,
            "shippedProposals": true,
            "corejs": 3,
            "useBuiltIns": "entry"
          }
        }
    ]
  ],
  "plugins": []
}

//next.config.js
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.js$/,
      exclude: /node_modules[/\\](?!react-data-grid[/\\]lib)/,
      use: 'babel-loader'
    })

    return config
  },
}

And my package.json

//package.json
{
  "name": "inventory",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "bootstrap": "^4.5.2",
    "next": "9.5.3",
    "react": "16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-data-grid": "7.0.0-canary.15",
    "react-dom": "16.13.1",
    "webpack": "^4.44.2"
  }
}

Unfortunately, the error is still the same

export { default } from './DataGrid';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:1054:16)
    at Module._compile (internal/modules/cjs/loader.js:1102:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Module.require (internal/modules/cjs/loader.js:1026:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at eval (webpack-internal:///react-data-grid:1:18)
    at Object.react-data-grid (/home/diego/inventario/.next/server/pages/index.js:171:1)
    at __webpack_require__ (/home/diego/inventario/.next/server/pages/index.js:23:31)

@GuyPaddock , I saw you fixed the error following this principle, not for Next.js but still. Any idea?
Thanks!

[dvelasquez25]

For those looking to implement this package with Next.js the solution is pretty straight forward.
Install the next-transpile-modules. using yarn add next-transpile-modules or npm i next-transpile-modules
Create a next.config.js at the root of the project and add the following lines

//next.config.js
const withTM = require('next-transpile-modules')(['react-data-grid']); 
module.exports = withTM();

The authors of next-transpile-modules explain why we need to add those lines and what problems the package solves.
After that, you will need to wrap the DataGrid component with next/dynamic. Take a look at Next.js docs for the explanation.
You will end up with something like this

//YourComponent.js
import dynamic from 'next/dynamic'

const DG = dynamic(
  () => import('react-data-grid/lib/DataGrid')
  ,
  {ssr: false}
)

After that you can use the new wrapped component as you would use the original component

import DataGrid from 'react-data-grid';
import dynamic from 'next/dynamic'


const DG = dynamic(
  () => import('react-data-grid/lib/DataGrid')
  ,
  {ssr: false}
)

export default function Home() {
  const columns = [
    { key: 'id', name: 'ID' },
    { key: 'title', name: 'Title' }
  ];

  const rows = [
    { id: 0, title: 'Example' },
    { id: 1, title: 'Demo' }
  ];
  return (
   <DG rows={rows} columns={columns}/>
  )
}

Don't forget to import the datagrid's css at the beginning of _app.js using import 'react-data-grid/dist/react-data-grid.css';

[craigglennie]

Building on @dvelasquez25's reply a little bit: if you're using Typescript in your NextJS project you'll probably need to do something like this

import type DataGrid from "react-data-grid";
import dynamic from 'next/dynamic'

const DG = dynamic(
  (() => import('react-data-grid/lib/DataGrid') as any), 
  {ssr: false}
) as typeof DataGrid;

Can't take any credit for this, I found it here

[amanmahajan7]

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