We are facing the issue

"Reference Error: self is not defined'

while trying to use React-data-grid. The issue is on the server side while trying to build the nodejs application using webpack. We are facing issue in the generated bundle file in the following lines

isOldIE = memoize(function() {          return /msie
[6-9]\b/.test(self.navigator.userAgent.toLowerCase());      }),

Could you let us know how can we fix this. It looks like the react data grid package has issues with the server side rendering.

We are facing the issue

"Reference Error: self is not defined'

while trying to use React-data-grid. The issue is on the server side while trying to build the nodejs application using webpack. We are facing issue in the generated bundle file in the following lines

isOldIE = memoize(function() {          return /msie
[6-9]\b/.test(self.navigator.userAgent.toLowerCase());      }),

Could you let us know how can we fix this. It looks like the react data grid package has issues with the server side rendering.

• javascript
• node.js
• reactjs

• Can you post the code showing where you defined self in relation to this line of code? – redOctober13 Commented Oct 25, 2017 at 19:38
• You haven't declared self within the scope of that executing code. The error message is quite clear. – Scott Marcus Commented Oct 25, 2017 at 19:38
• 1 Related: github.com/adazzle/react-data-grid/issues/361 – Jordan Running Commented Oct 25, 2017 at 19:40
• @redOctober13 The code expects the normal browser-defined self global, which is a synonym for window in the browser. It is absent in this server-side environment; this is basically the same as Reference Error: window is not defined when using window in Node code – apsillers Commented Oct 25, 2017 at 19:42

2 Answers 2

self is likely referring to window which is not available on the server side...it's only available in a browser context. The navigator reference makes this especially apparent. This code is trying to test the user agent for Internet Explorer verison.

self.navigator.userAgent.toLowerCase()

As Jordan pointed out, there is an open issue #361 regarding isomorphic rendering.

If possible, try to avoid executing that code when on the server-side. Otherwise, you'll have to wait for a patch in react-data-grid.

Fixed it by using the following package exenv which restricts it check for the posted condition only during client rendering

var ExecutionEnvironment = require('exenv');
if(ExecutionEnvironment.canUseDOM) {
  const ReactDataGrid = require('react-data-grid');
  const {Toolbar, Filters: {NumericFilter, AutoCompleteFilter, MultiSelectFilter, SingleSelectFilter}, Data: {Selectors}} = require('react-data-grid-addons');
}