React-data-grid: isomorphic rendering - window is not defined

[LaurieSReynolds]

Hello,

Integrating react-data-grid into our isomorphic react app, and seeing the following error.

....../node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:67
window.ReactDataGridPlugins = { Editors: Editors, Formatters: Formatters, Toolbar: Toolbar, Menu: Menu };
^
ReferenceError: window is not defined

Does the react-data-grid support server rendering?

[malonecj]

It hasn't been tested to handle server side rendering. This is something we can look into. Thanks for notifying

[rkoberg]

This breaks a site. The first request to a site/app is rendered on the server, and because of this window bug, there is a fatal error on the server breaking intitial render.

A quick check can just not render on the server:

const canUseDOM = !!(
  (typeof window !== 'undefined' &&
  window.document && window.document.createElement)
);

Or is there some config setting disable needing window?

/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:15021
    module.exports = __webpack_require__(297)((window) || window || this);
                                               ^

ReferenceError: window is not defined
    at Object.module.exports.Symbol (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:15021:45)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:1699:26)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:6228:29)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:6670:25)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:12061:17)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:1628:25)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:5024:18)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.<anonymous> (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:5056:19)
    at __webpack_require__ (/Users/rkoberg/Sites/fwi/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)

[nicomfe]

same error but im just running unit tests using mocha and shallow rendering with enzyme

ReferenceError: window is not defined
    at Object.module.exports.Symbol (/Users/nicofetter/proj/horizon/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:15021:45)
    at __webpack_require__ (/Users/nicofetter/proj/horizon/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/nicofetter/proj/horizon/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:1699:26)
    at __webpack_require__ (/Users/nicofetter/proj/horizon/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:30:30)
    at Object.exports.__esModule (/Users/nicofetter/proj/horizon/node_modules/react-data-grid/dist/react-data-grid.ui-plugins.js:6228:29)

[Wilfred]

We hit this issue when writing tests for components that use react-data-grid plugins. Even with shallow rendering, we needed to use jsdom-global to run the tests with window defined.

[jgordor]

Hi,

I also get the error starting a webpack dev server, and jsdom-global did not help:

node_modules/react-data-grid/dist/react-data-grid.js:196
        if (typeof options.singleton === "undefined") options.singleton = isOldIE();
                                                                     ^
 [dev:server] ReferenceError: window is not defined
     at node_modules/react-data-grid/dist/react-data-grid.js:179:31

any help?

Thanks

[curtd59]

Hi. I get the error as well. Breaks the application.

node_modules/react-data-grid/dist/react-data-grid.js:196
                if (typeof options.singleton === "undefined") options.singleton = isOldIE();
                                                                    ^

ReferenceError: window is not defined
    /node_modules/react-data-grid/dist/react-data-grid.js:179:31

Help? Suggestions? Will this be fixed?

[curtd59]

So do we need to put a notice on the readme that....

(a) react-data-grid is incompatible with server side rendering.
(b) react-data-grid is incompatible therefore with React Starter Kit.
(c) react-data-grid is only compatible with client side rendering

...?

Because we invested in using this solution and now we can't?

[mi-lee]

Getting the same error. Has anybody come up with a hack to avoid this completely? I've been looking into libraries like https://www.npmjs.com/package/window-or-global but still not managed to hack successfully.

[mi-lee]

Here's a hack for anyone else's reference:

import React, { Component } from 'react'
// import other libraries that can be server side rendered 

if (typeof window === 'undefined') {
  module.exports = {}
} else {
  var ReactDataGrid = require('react-data-grid');
  const {Toolbar, Data: {Selectors}} = require('react-data-grid-addons');

  class Example extends Component {
  ...
  }

  module.exports = Example
}

[ghost]

How can we make server rendering work with this?

[mi-lee]

@liroyleshed Should have clarified, it will not make it server side rendered, it will only avoid throwing errors when it's building, i.e. window is undefined.

[ghost]

@liroyleshed et. al until this package supports a Node execution runtime enabling isomorphic rendering you could look at using Webpack to shim the module using the import-loader: https://github.com/webpack/docs/wiki/shimming-modules.

This is useful for third-party modules that rely on global variables like $ or this being the window object. The imports loader can add the necessary require('whatever') calls, so those modules work with webpack.

I've done this before to shim modules using the global namespace. It's not straightforward, and it clobbers dependencies in a difficult-to-maintain way, but it works. Good luck!

[camsjams]

I was having too many issues with this library for universal rendering so I've switched to https://github.com/reactabular/reactabular, which doesn't blow up on the server side and creates the table with SSR - no hiccups.

[einarjegorov]

This is an easy and clean workaround to get this lib working with SSR until devs make the grid aware of environment where it is running in (client or server). This works assuming you are using Webpack/similar bundling tool that can inject global vars into the namespace.

In your client-side webpack.config.js, simply define a variable using DefinePlugin to let your code to be aware of the environment:

plugins: [
  new webpack.DefinePlugin({
    "process.env": {
      IS_BROWSER: "true"
    }
  })
]

In your code, use:

if (process.env.IS_BROWSER) {
  var ReactDataGrid = require("react-data-grid");
  var { Toolbar, Filters: { NumericFilter, AutoCompleteFilter }, Data: { Selectors } } = require('react-data-grid-addons');
}

I'd stick with this workaround, since this lib got some of the best filtering and sorting tools out there. If you have no problems with the appearance and visuals of Reactabular (yuck), go for it instead.

[jpdriver]

@jhabdas can you explain? (but not in this thread -- let's keep things here on-topic) maybe jump on our react-data-grid Slack?

[devicharan]

Huh , Me too ! Got stuck on knowing this doesnt do a server side rendering. Thought of going to reacttabular but i didnt like their styling , i didnt like why table has to flickr when you go for editing a row . It will great if this "self" & "window" dependencies were removed as soon as possible .

[ghost]

@jpdriver sorry just seeing this now. tbh my preference is to use progressive enhancement to build my apps. I'm personally not much into isomorphic rendering as I see it as an antipattern for the web. YMMV. These are my opinions.

[kaushal4340]

@mi-lee 's comment worked for me.
window object checking before requiring 'react-data-grid' or 'react-data-grid-addons' wont throw an error while build or runtime.
Thanks

[Halkeey]

I'm using this module window-or-global here with isomorphic server rendering react app and it works great!

[mikol-styra]

Here’s another workaround. Rather than modify your source to use require()/import() dynamically and everywhere you need react-data-grid, you can modify the dist/react-data-grid.js file to ignore exceptions thrown during the import process. (Because third-party _imports_ should never fail, right?) To do this, replace:

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

With:

/******/        try {
/******/            // Execute the module function
/******/            modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/        } catch (error) {
/******/            console.error('Warning:', error);
/******/        }

It may seem strange to patch the dist file, but that’s exactly what I need to do in any case because #625. I’ve had to patch other third-party code in the past, and what I do is check a patch file (e.g., [email protected]) into my repo so that the patch is documented and reproducible.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please reopen this if you feel it has been incorrectly closed and we will do our best to look into it. Thank you for your contributions.

[m-liddell]

@mikol-styra Thanks so much, this worked great for me