reactjs - Material UI withStyles in an NPM package causes errors when used through npm link
问题描述
I'm trying to locally build the oodt_fm_plugin
NPM package and link it locally to the oodt_opsui_sample_app
. However, when I'm trying to do that, the following error is thrown in the browser.
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.
The error goes away if I remove the withStyles
HOC from the components in oodt_fm_plugin
, but I want to preserve it for the material UI styles.
React components in the oodt_fm_plugin
have been exported as follows. ( This plugin can be viewed at https://github.com/apache/oodt/tree/development/react-components/oodt_fm_plugin. )
export default withStyles(styles)(Product);
What I tried to overcome this are as follows, but none of those solved the issue.
- Making
react
andreact-dom
packages in the plugin, dev dependencies - Adding the following snippet to the
webpack.config.js
of the plugin.
resolve: {
modules: [path.resolve('node_modules'), 'node_modules'],
},
Can someone point me in the right direction so that I can set up both oodt_fm_plugin
and oodt_ui_sample_app
correctly in local dev environment? Helpful advice is highly appreciated.
解决方案
好吧,经过几天的尝试,我终于设法解决了这个问题。我发现,这不是材料 ui 的问题,而是 Create React App 的问题。这个Github 问题评论帮助我解决了我的问题。
为了更加清楚,我将在此答案本身中引用问题评论,这样即使评论被删除,它也会保留在这里。
^ 好的,我为 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"
推荐阅读
- python - check if condition met for a time duration python
- time-complexity - RSA 加密的大 O 表示法是什么?
- git - 如何将我的更改推送到 Bit bucket 功能分支
- vba - 从包含特定单词的 ms 单词表中删除特定行
- php - 提交 0 如果选中复选框,则提交 1
- azure-ad-b2c - 如何获取令牌不同的资源 msal2
- public-key-encryption - 私钥和公钥存储在服务器的什么位置?最佳做法是什么?
- css - FAB 将汉堡切换到 x onclick。HTML/CSS/JScript
- uiveri5 - 为什么 uiveri 中的图像比较会给出 base64 编码的字符串?
- javascript - react native 编译失败