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

【问题标题】：Uncaught ReferenceError: e is not defined / material ui data-gridUncaught ReferenceError: e is not defined / material ui data-grid
【发布时间】：2021-09-04 10:03:44
【问题描述】：

React/Material-ui newbi here 出现我无法弄清楚的错误。 我正在使用 material-ui/data-grid 加载组件，而 datagrid 只是在应用程序中返回“发生错误”。加载没有行和列const的组件，不返回错误。但是由于数据网格中没有数据。

查看错误下方的组件

浏览器控制台消息：

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;

我该如何解决这个问题？

【问题讨论】：

  • 能否重现问题here
  • @SarunUK 好点。我尝试过，但我的更改似乎并没有持续。无论如何，我无法重现该问题。网格在沙箱中加载得很好。我确实尝试在本地配置的 App.js 文件中直接加载 dataGrid，但遇到了同样的问题。您还有其他建议吗？喜欢我可以探索的控制台反馈中的任何内容吗？

标签： javascript reactjs material-ui


【解决方案1】：

我们遇到了同样的问题

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

我们已解决更新此依赖项

"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"

【讨论】：

    【解决方案2】：

    它只是归结为过时的反应脚本。我运行了一个新的构建命令，发现 minify 失败了： https://github.com/mui-org/material-ui/issues/11044

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2015-12-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-08
      • 1970-01-01
      • 1970-01-01
      • 2019-01-22
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode