通过 npm 链接使用 NPM 包中的 Material UI withStyles 会导致错误答案

【问题标题】：Material UI withStyles in an NPM package causes errors when used through npm link通过 npm 链接使用 NPM 包中的 Material UI withStyles 会导致错误
【发布时间】：2021-06-29 12:03:45
【问题描述】：

我正在尝试在本地构建oodt_fm_plugin NPM 包并将其本地链接到oodt_opsui_sample_app。但是，当我尝试这样做时，浏览器中会引发以下错误。

错误：缩小的 React 错误 #321；访问 https://reactjs.org/docs/error-decoder.html?invariant=321 完整版消息或使用非缩小的开发环境来解决完整的错误和其他有用的警告。

如果我从oodt_fm_plugin 中的组件中删除withStyles HOC，错误就会消失，但我想为材质UI 样式保留它。

oodt_fm_plugin 中的 React 组件已导出如下。（这个插件可以在https://github.com/apache/oodt/tree/development/react-components/oodt_fm_plugin查看。）

export default withStyles(styles)(Product);

我试图解决的问题如下，但没有一个能解决问题。

在插件中制作 react 和 react-dom 包，开发依赖项
将以下 sn-p 添加到插件的webpack.config.js。

    resolve: {
        modules: [path.resolve('node_modules'), 'node_modules'],
    },

谁能指出我正确的方向，以便我可以在本地开发环境中正确设置oodt_fm_plugin 和oodt_ui_sample_app？非常感谢有用的建议。

【问题讨论】：

标签： reactjs material-ui higher-order-components npm-package

【解决方案1】：

好吧，经过几天的尝试，我终于设法解决了这个问题。我发现，这不是材料 ui 的问题，而是 Create React App 的问题。这个Github issue comment 帮助我解决了我的问题。

为了更清楚起见，我将在此答案本身中引用问题评论，以便即使评论被删除，它也会保留在此处。

^ 好的，我为 create-react-app 解决这个问题的解决方案是使用 react-app-rewired 和 customize-cra。

这是我的 config-overrides.js ：
const {
    override,
    addWebpackAlias,   } = require("customize-cra");

const path = require('path'); 

module.exports = override( 
    addWebpackAlias({
        react: path.resolve('./node_modules/react')
    }) ) 
示例项目：https://github.com/dwjohnston/material-ui-hooks-issue/tree/master

然后，修改start脚本如下。

"start": "react-app-rewired start"

【讨论】：