Uncaught ReferenceError: e is not defined / material ui data-grid

user_16273061 0
Viewed 2114

React/Material-ui newbi here and getting an error I can't figure out. I'm loading a components using material-ui/data-grid and the datagrid is simply returning "An error occurred" in the app. Loading the component without the row and columns const, the error is not returned. But with no data in the data-grid will of cause.

See the components below the error

Browser console message:

Uncaught ReferenceError: e is not defined
    at index-esm.js:15
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at updateSimpleMemoComponent (react-dom.development.js:17215)
    at updateMemoComponent (react-dom.development.js:17092)
    at beginWork (react-dom.development.js:19135)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)
(anonymous) @ index-esm.js:15
renderWithHooks @ react-dom.development.js:14985
updateFunctionComponent @ react-dom.development.js:17356
updateSimpleMemoComponent @ react-dom.development.js:17215
updateMemoComponent @ react-dom.development.js:17092
beginWork @ react-dom.development.js:19135
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
4index.js:2178 The above error occurred in one of your React components:

    at http://localhost:3000/static/js/bundle.js:40271:65893
    at _i (http://localhost:3000/static/js/bundle.js:40271:70997)
    at div
    at http://localhost:3000/static/js/bundle.js:40271:71855
    at div
    at http://localhost:3000/static/js/bundle.js:40271:50127
    at div
    at Kc (http://localhost:3000/static/js/bundle.js:40271:208889)
    at Yc (http://localhost:3000/static/js/bundle.js:40271:210674)
    at Zc (http://localhost:3000/static/js/bundle.js:40271:208899)
    at Xc (http://localhost:3000/static/js/bundle.js:40271:209455)
    at div
    at NoSsr (http://localhost:3000/static/js/bundle.js:19823:24)
    at http://localhost:3000/static/js/bundle.js:40271:48787
    at Uc (http://localhost:3000/static/js/bundle.js:40271:208597)
    at http://localhost:3000/static/js/bundle.js:40271:221363
    at http://localhost:3000/static/js/bundle.js:40271:222078
    at div
    at div
    at CreateDataDocumentation
    at div
    at Private
    at div
    at App (http://localhost:3000/static/js/bundle.js:119397:59)
    at Route (http://localhost:3000/static/js/bundle.js:106214:29)
    at Router (http://localhost:3000/static/js/bundle.js:105843:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:105449:35)

React will try to recreate this component tree from scratch using the error boundary you provided, Zc.
__stack_frame_overlay_proxy_console__ @ index.js:2178
logCapturedError @ react-dom.development.js:20085
update.payload @ react-dom.development.js:20133
getStateFromUpdate @ react-dom.development.js:12102
processUpdateQueue @ react-dom.development.js:12250
updateClassInstance @ react-dom.development.js:13013
updateClassComponent @ react-dom.development.js:17432
beginWork @ react-dom.development.js:19073
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:2178 Warning: React does not recognize the `hasError` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `haserror` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at http://localhost:3000/static/js/bundle.js:40271:51536
    at http://localhost:3000/static/js/bundle.js:40271:169168
    at div
    at Kc (http://localhost:3000/static/js/bundle.js:40271:208889)
    at Zc (http://localhost:3000/static/js/bundle.js:40271:208899)
    at Xc (http://localhost:3000/static/js/bundle.js:40271:209455)
    at div
    at NoSsr (http://localhost:3000/static/js/bundle.js:19823:24)
    at http://localhost:3000/static/js/bundle.js:40271:48787
    at Uc (http://localhost:3000/static/js/bundle.js:40271:208597)
    at http://localhost:3000/static/js/bundle.js:40271:221363
    at http://localhost:3000/static/js/bundle.js:40271:222078
    at div
    at div
    at CreateDataDocumentation
    at div
    at Private
    at div
    at App (http://localhost:3000/static/js/bundle.js:119397:59)
    at Route (http://localhost:3000/static/js/bundle.js:106214:29)
    at Router (http://localhost:3000/static/js/bundle.js:105843:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:105449:35)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
validateProperty$1 @ react-dom.development.js:3513
warnUnknownProperties @ react-dom.development.js:3559
validateProperties$2 @ react-dom.development.js:3583
validatePropertiesInDevelopment @ react-dom.development.js:8765
setInitialProperties @ react-dom.development.js:9041
finalizeInitialChildren @ react-dom.development.js:10201
completeWork @ react-dom.development.js:19470
completeUnitOfWork @ react-dom.development.js:22815
performUnitOfWork @ react-dom.development.js:22787
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
4index.js:2178 Material-UI: GridErrorHandler - An unexpected error occurred. Error: e is not defined.  ReferenceError: e is not defined
    at index-esm.js:15
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at updateSimpleMemoComponent (react-dom.development.js:17215)
    at updateMemoComponent (react-dom.development.js:17092)
    at beginWork (react-dom.development.js:19135)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at flushPassiveEffectsImpl (react-dom.development.js:23620)
    at unstable_runWithPriority (scheduler.development.js:468)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushPassiveEffects (react-dom.development.js:23447)
    at react-dom.development.js:23324
    at workLoop (scheduler.development.js:417)
    at flushWork (scheduler.development.js:390)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157) undefined
__stack_frame_overlay_proxy_console__ @ index.js:2178
t.<computed> @ index-esm.js:15
logError @ index-esm.js:15
componentDidCatch @ index-esm.js:15
callback @ react-dom.development.js:20159
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20709
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
flushPassiveEffectsImpl @ react-dom.development.js:23620
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:2178 Warning: React does not recognize the `errorInfo` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `errorinfo` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at div
    at http://localhost:3000/static/js/bundle.js:40271:51536
    at http://localhost:3000/static/js/bundle.js:40271:169168
    at div
    at Kc (http://localhost:3000/static/js/bundle.js:40271:208889)
    at Zc (http://localhost:3000/static/js/bundle.js:40271:208899)
    at Xc (http://localhost:3000/static/js/bundle.js:40271:209455)
    at div
    at NoSsr (http://localhost:3000/static/js/bundle.js:19823:24)
    at http://localhost:3000/static/js/bundle.js:40271:48787
    at Uc (http://localhost:3000/static/js/bundle.js:40271:208597)
    at http://localhost:3000/static/js/bundle.js:40271:221363
    at http://localhost:3000/static/js/bundle.js:40271:222078
    at div
    at div
    at CreateDataDocumentation
    at div
    at Private
    at div
    at App (http://localhost:3000/static/js/bundle.js:119397:59)
    at Route (http://localhost:3000/static/js/bundle.js:106214:29)
    at Router (http://localhost:3000/static/js/bundle.js:105843:30)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:105449:35)

App.js

function App () {

return ( 
  <div>
      <Private />
  </div>

);
}

export default App;

Private.js

function Private () {
    return (
      <div>
  private component
    <Row><PlatformNavBar /></Row>
   <MyDataGrid />
       
    </div>

);         
}
export default Private;

MyDataGrid.js

import { DataGrid } from '@material-ui/data-grid';

function MyDataGrid() {

  return (

  <div style={{ height: 300, width: '100%' }}>
    <DataGrid rows={rows} columns={columns}/>
  </div>
  );
  }

  const columns = [
    { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  ];
  
   const rows = [
    { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
    { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
    { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
    { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
    { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
    { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
    { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
    { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
    { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
   ];

export default MyDataGrid;

How do I solve this?

material-ui reactjs javascript
2 Answers
user_162730610

We had the same problem with

"@material-ui/data-grid": "4.0.0-alpha.34"

We have resolved updating this dependencies

"webpack": "4.32.2" ->  "4.46.0"
"webpack-cli": "3.3.2" -> "4.7.2"
"webpack-dev-server": "3.4.1" -> "3.11.2"
"webpack-merge": "4.2.1" -> "4.2.2"
user_76895170
Related