Material UI NPM 包中的 withStyles 在通过 npm link 使用时会导致错误

Question

我正在尝试在本地构建 oodt_fm_plugin NPM package and link it locally to the oodt_opsui_sample_app。但是，当我尝试这样做时，浏览器中出现以下错误。

Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

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

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

export default withStyles(styles)(Product);

我试图克服这个问题的方法如下，但是 none 解决了这个问题。

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

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

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

Answer 1

好吧，经过几天的努力，我终于设法解决了这个问题。正如我发现的那样，这不是 material ui 的问题，而是 Create React App 的问题。这 Github issue comment 帮助我解决了我的问题。

为了更加清楚，我会在这个答案中引用问题评论，这样即使评论被删除，它也会保留在这里。

^ Ok, the solution I went for to solve this for create-react-app is to use react-app-rewired and customize-cra.

Here is my config-overrides.js :
const {
    override,
    addWebpackAlias,   } = require("customize-cra");

const path = require('path'); 

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

然后，修改start脚本如下。

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

Material UI NPM 包中的 withStyles 在通过 npm link 使用时会导致错误

Material UI withStyles in an NPM package causes errors when used through npm link

reactjs

material-ui

higher-order-components

npm-package