javascript - 更新后的 Material UI 抛出 TypeError : Cannot read property 'muiName' of undefined

Question

我将 "material-ui": "^1.0.0-beta.38" 更新为 "@material-ui/core": "^1.3.0"。我更改了导入，运行 npm install，删除了 node_modules 甚至 package-lock.json 但我仍然收到模糊的错误消息 TypeError: Cannot read property 'muiName ' 的未定义。

关于muiName的信息可以在here in the documentation上找到，但是好像和我的问题无关，是更新引起的。

该错误曾在 here 报告过一次，但由于缺少详细信息而关闭。

有人知道是什么原因造成的吗？

详细日志如下:

TypeError: Cannot read property 'muiName' of undefined
isMuiElement
D:/SC/projectPath/node_modules/@material-ui/core/utils/reactHelpers.js:31
  28 | }
  29 | 
  30 | function isMuiElement(element, muiNames) {
> 31 |   return _react.default.isValidElement(element) && muiNames.indexOf(element.type.muiName) !== -1;
  32 | }
  33 | 
  34 | function isMuiComponent(element, muiNames) {
View compiled
(anonymous function)
D:/SC/projectPath/node_modules/@material-ui/core/FormControl/FormControl.js:135
  132 | 
  133 | if (children) {
  134 |   _react.default.Children.forEach(children, function (child) {
> 135 |     if (!(0, _reactHelpers.isMuiElement)(child, ['Input', 'Select', 'NativeSelect'])) {
  136 |       return;
  137 |     }
  138 | 
View compiled
forEachSingleChild
D:/SC/projectPath/node_modules/react/cjs/react.development.js:881
  878 |   var func = bookKeeping.func,
  879 |       context = bookKeeping.context;
  880 | 
> 881 |   func.call(context, child, bookKeeping.count++);
  882 | }
  883 | 
  884 | /**
View compiled
traverseAllChildrenImpl
D:/SC/projectPath/node_modules/react/cjs/react.development.js:785
  782 | }
  783 | 
  784 | if (invokeCallback) {
> 785 |   callback(traverseContext, children,
  786 |   // If it's the only child, treat the name as if it was wrapped in an array
  787 |   // so that it's consistent if the number of children grows.
  788 |   nameSoFar === '' ? SEPARATOR + getComponentKey(children, 0) : nameSoFar);
View compiled
traverseAllChildren
D:/SC/projectPath/node_modules/react/cjs/react.development.js:856
  853 |     return 0;
  854 |   }
  855 | 
> 856 |   return traverseAllChildrenImpl(children, '', callback, traverseContext);
  857 | }
  858 | 
  859 | /**
View compiled
forEachChildren [as forEach]
D:/SC/projectPath/node_modules/react/cjs/react.development.js:901
  898 |     return children;
  899 |   }
  900 |   var traverseContext = getPooledTraverseContext(null, null, forEachFunc, forEachContext);
> 901 |   traverseAllChildren(children, forEachSingleChild, traverseContext);
  902 |   releaseTraverseContext(traverseContext);
  903 | }
  904 | 
View compiled
new FormControl
D:/SC/projectPath/node_modules/@material-ui/core/FormControl/FormControl.js:134
  131 | var children = _this.props.children;
  132 | 
  133 | if (children) {
> 134 |   _react.default.Children.forEach(children, function (child) {
  135 |     if (!(0, _reactHelpers.isMuiElement)(child, ['Input', 'Select', 'NativeSelect'])) {
  136 |       return;
  137 |     }
View compiled
constructClassInstance
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:11447
  11444 |   }
  11445 | }
  11446 | 
> 11447 | var instance = new ctor(props, context);
  11448 | var state = workInProgress.memoizedState = instance.state !== null && instance.state !== undefined ? instance.state : null;
  11449 | adoptClassInstance(workInProgress, instance);
  11450 | 
View compiled
updateClassComponent
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:13144
  13141 | if (current === null) {
  13142 |   if (workInProgress.stateNode === null) {
  13143 |     // In the initial pass we might need to construct the instance.
> 13144 |     constructClassInstance(workInProgress, workInProgress.pendingProps, renderExpirationTime);
  13145 |     mountClassInstance(workInProgress, renderExpirationTime);
  13146 | 
  13147 |     shouldUpdate = true;
View compiled
beginWork
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:13824
  13821 | case FunctionalComponent:
  13822 |   return updateFunctionalComponent(current, workInProgress);
  13823 | case ClassComponent:
> 13824 |   return updateClassComponent(current, workInProgress, renderExpirationTime);
  13825 | case HostRoot:
  13826 |   return updateHostRoot(current, workInProgress, renderExpirationTime);
  13827 | case HostComponent:
View compiled
performUnitOfWork
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:15863
  15860 |   startBaseRenderTimer();
  15861 | }
  15862 | 
> 15863 | next = beginWork(current, workInProgress, nextRenderExpirationTime);
  15864 | 
  15865 | if (workInProgress.mode & ProfileMode) {
  15866 |   // Update "base" time if the render wasn't bailed out on.
View compiled
workLoop
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:15902
  15899 | if (!isAsync) {
  15900 |   // Flush all expired work.
  15901 |   while (nextUnitOfWork !== null) {
> 15902 |     nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  15903 |   }
  15904 | } else {
  15905 |   // Flush asynchronous work until the deadline runs out of time.
View compiled
HTMLUnknownElement.callCallback
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:100
   97 |   // nested call would trigger the fake event handlers of any call higher
   98 |   // in the stack.
   99 |   fakeNode.removeEventListener(evtType, callCallback, false);
> 100 |   func.apply(context, funcArgs);
  101 |   didError = false;
  102 | }
  103 | 
View compiled
invokeGuardedCallbackDev
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:138
  135 | // Synchronously dispatch our fake event. If the user-provided function
  136 | // errors, it will trigger our global error handler.
  137 | evt.initEvent(evtType, false, false);
> 138 | fakeNode.dispatchEvent(evt);
  139 | 
  140 | if (didError) {
  141 |   if (!didSetError) {
View compiled
invokeGuardedCallback
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:187
  184 |  * @param {...*} args Arguments for function
  185 |  */
  186 | invokeGuardedCallback: function (name, func, context, a, b, c, d, e, f) {
> 187 |   invokeGuardedCallback$1.apply(ReactErrorUtils, arguments);
  188 | },
  189 | 
  190 | /**
View compiled
replayUnitOfWork
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:15310
  15307 | // Replay the begin phase.
  15308 | isReplayingFailedUnitOfWork = true;
  15309 | originalReplayError = thrownValue;
> 15310 | invokeGuardedCallback$2(null, workLoop, null, isAsync);
  15311 | isReplayingFailedUnitOfWork = false;
  15312 | originalReplayError = null;
  15313 | if (hasCaughtError()) {
View compiled
renderRoot
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:15962
  15959 | 
  15960 | var failedUnitOfWork = nextUnitOfWork;
  15961 | if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
> 15962 |   replayUnitOfWork(failedUnitOfWork, thrownValue, isAsync);
  15963 | }
  15964 | 
  15965 | // TODO: we already know this isn't true in some cases.
View compiled
performWorkOnRoot
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16560
  16557 |   // This root is already complete. We can commit it.
  16558 |   completeRoot(root, finishedWork, expirationTime);
  16559 | } else {
> 16560 |   finishedWork = renderRoot(root, expirationTime, false);
  16561 |   if (finishedWork !== null) {
  16562 |     // We've completed the root. Commit it.
  16563 |     completeRoot(root, finishedWork, expirationTime);
View compiled
performWork
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16482
  16479 |   }
  16480 | } else {
  16481 |   while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && (minExpirationTime === NoWork || minExpirationTime >= nextFlushedExpirationTime)) {
> 16482 |     performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false);
  16483 |     findHighestPriorityRoot();
  16484 |   }
  16485 | }
View compiled
performSyncWork
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16454
  16451 | }
  16452 | 
  16453 | function performSyncWork() {
> 16454 |   performWork(Sync, false, null);
  16455 | }
  16456 | 
  16457 | function performWork(minExpirationTime, isAsync, dl) {
View compiled
requestWork
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16354
  16351 | 
  16352 | // TODO: Get rid of Sync and use current time?
  16353 | if (expirationTime === Sync) {
> 16354 |   performSyncWork();
  16355 | } else {
  16356 |   scheduleCallbackWithExpiration(expirationTime);
  16357 | }
View compiled
scheduleWork$1
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16218
  16215 | !isWorking || isCommitting$1 ||
  16216 | // ...unless this is a different root than the one we're rendering.
  16217 | nextRoot !== root) {
> 16218 |   requestWork(root, nextExpirationTimeToWorkOn);
  16219 | }
  16220 | if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
  16221 |   invariant(false, 'Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.');
View compiled
scheduleRootUpdate
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16785
  16782 |   }
  16783 |   enqueueUpdate(current, update, expirationTime);
  16784 | 
> 16785 |   scheduleWork$1(current, expirationTime);
  16786 |   return expirationTime;
  16787 | }
  16788 | 
View compiled
updateContainerAtExpirationTime
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16812
  16809 |     container.pendingContext = context;
  16810 |   }
  16811 | 
> 16812 |   return scheduleRootUpdate(current, element, expirationTime, callback);
  16813 | }
  16814 | 
  16815 | function findHostInstance(component) {
View compiled
updateContainer
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16839
  16836 |   var current = container.current;
  16837 |   var currentTime = recalculateCurrentTime();
  16838 |   var expirationTime = computeExpirationForFiber(currentTime, current);
> 16839 |   return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
  16840 | }
  16841 | 
  16842 | function getPublicRootInstance(container) {
View compiled
ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:17122
  17119 |   if (callback !== null) {
  17120 |     work.then(callback);
  17121 |   }
> 17122 |   updateContainer(children, root, null, work._onCommit);
  17123 |   return work;
  17124 | };
  17125 | ReactRoot.prototype.unmount = function (callback) {
View compiled
(anonymous function)
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:17262
  17259 |     if (parentComponent != null) {
  17260 |       root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
  17261 |     } else {
> 17262 |       root.render(children, callback);
  17263 |     }
  17264 |   });
  17265 | } else {
View compiled
unbatchedUpdates
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:16679
  16676 |       isUnbatchingUpdates = false;
  16677 |     }
  16678 |   }
> 16679 |   return fn(a);
  16680 | }
  16681 | 
  16682 | // TODO: Batching should be implemented at the renderer level, not within
View compiled
legacyRenderSubtreeIntoContainer
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:17258
  17255 |   };
  17256 | }
  17257 | // Initial mount should not be batched.
> 17258 | unbatchedUpdates(function () {
  17259 |   if (parentComponent != null) {
  17260 |     root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
  17261 |   } else {
View compiled
render
D:/SC/projectPath/node_modules/react-dom/cjs/react-dom.development.js:17317
  17314 |   return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
  17315 | },
  17316 | render: function (element, container, callback) {
> 17317 |   return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
  17318 | },
  17319 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
  17320 |   !(parentComponent != null && has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
View compiled
./src/index.js
D:/SC/projectPath/src/index.js:9
   6 | import registerServiceWorker from './registerServiceWorker';
   7 | import 'babel-polyfill';
   8 | 
>  9 | ReactDOM.render(
  10 |   <Provider store={store}>
  11 |     <App />
  12 |   </Provider>, document.querySelector('#root')

我的 package.json 文件如下所示

"dependencies": {
    "babel-polyfill": "^6.26.0",
    "classnames": "^2.2.5",
    "css-loader": "^1.0.0",
    "grunt": "^1.0.2",
    "grunt-available-tasks": "^0.6.3",
    "grunt-check-dependencies": "^1.0.0",
    "grunt-npm-command": "^0.1.2",
    "grunt-run": "^0.8.0",
    "json-server": "^0.14.0",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "prop-types": "^15.6.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-moment": "^0.7.9",
    "react-mutation-observer": "^1.1.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-devtools-extension": "^2.13.2",
    "redux-thunk": "^2.2.0",
    "typeface-roboto": "0.0.54",
    "@material-ui/core": "^1.3.0"
  }

Answer 1

我继承了一个最初在 Material-UI beta 上的项目，当我更新到 2.x.x 版本时，我开始遇到这个错误。

我的问题是如何导入组件。在 alpha 和 beta 版本(可能还有 1.x.x)中，一些组件是从另一个组件二次导出的。即。

从“@material-ui/core/List”导入列表，{ListItem}；

在新版本中，每个组件都是从其自己的文件中默认导出的，这意味着您必须这样导入 ListItem:从“@material-ui/core/ListItem”导入 ListItem；

为了简单起见(因为我必须更新许多导入)我使用了以下快捷方式:

从“@material-ui/core”导入{List, ListItem};

最重要的是，新版本的 Material-UI 试图解析不存在的元素，作为该文件的导出，并抛出一个错误，说它不理解你给它的是什么。这可能在某处的迁移文档中有所介绍，但如果能获得更可靠的错误消息就更好了。