reactjs - 无法读取未定义的属性 '@global' - NPM 链接 MUI 组件

Question

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

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

然而，对于模块开发，我想使用 npm link这样我就可以使用 webpack --watch/webpack-dev-server模块和站点目录中的等。

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

Uncaught TypeError: Cannot read property '@global' of undefined引用var rules = style[propKey]; function handleNestedGlobalContainerRule(rule)行.

和其他如:The above error occurred in the <WithStyles(Typography)> component

从类似的帖子中我可以看出这是在提示缺少 theme对象(该网站有一个 MuiThemeProvider 声明了一个主题对象)。

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

Answer 1

在检查了各种提交并阅读了@AstenMies 的引用资料之后，我似乎已经解决了这个问题。或者至少我无法再重现该问题。

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

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