无法读取未定义的属性“@global” - NPM 链接 MUI 组件答案

【问题标题】：Cannot read property '@global' of undefined - NPM link MUI components无法读取未定义的属性“@global” - NPM 链接 MUI 组件
【发布时间】：2019-03-21 12:53:16
【问题描述】：

我创建了许多 React 组件，它们包装了 Material-UI 组件并打包为 NPM 模块。

当通过远程包安装：npm install *name-of-package*，或通过本地安装：npm install ../*name-of-package* 时，该模块工作正常。

但是，对于模块开发，我想使用npm link，以便可以在模块和站点目录中使用webpack --watch / webpack-dev-server 等。

为此，我运行npm link 在模块目录中创建符号链接，然后在站点目录中创建npm link *name-of-package*。 Webpack 按预期启动，但是我在浏览器中不断遇到与 MUI 的 withStyles 函数相关的错误：

Uncaught TypeError: Cannot read property '@global' of undefined 指的是function handleNestedGlobalContainerRule(rule) 的var rules = style[propKey]; 行。

以及其他如：The above error occurred in the <WithStyles(Typography)> component

从我从类似帖子中得知，这是在抱怨缺少 theme 对象（该网站有一个声明了主题对象的 MuiThemeProvider）。

谁能建议为什么这可能适用于npm install 而不是npm link？我似乎无法弄清楚这一点。

【问题讨论】：

问题肯定来自withStyles。正如我所认为的这里提到的，样式对象存在问题。原因显然是您在样式对象中的一个值是 null 或未定义。 See this issue on github。为什么它没有出现在 npm install 中？我不能用我这里的信息来判断。您可能在 npm link 和 npm install 中使用了不同的分支/版本。

标签： reactjs npm webpack material-ui npm-link

【解决方案1】：

在检查了各种提交并阅读了@AstenMies 的参考资料后，我似乎已经解决了这个问题。或者至少我不再能够复制这个问题。

我不完全确定哪个确切的更改解决了这个问题，但我会列出我做了什么，以防其他人发现自己处于这种情况：

正如@AstenMies 的链接所指向的，我的theme 对象中的属性未定义（尽管这本身并不能解决我的问题）
确保您的模块和站点的 React 和 React-DOM 版本相同
不要混用 yarn add 和 npm install 命令 - 混用包管理器会导致不一致
如有疑问，请删除您的node_modules 文件夹并重新安装。你也可以在这里npm cache clean 避免任何缓存的垃圾

【讨论】：