0

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.

  1. Making react and react-dom packages in the plugin, dev dependencies
  2. 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.

4

1 回答 1

1

好吧，经过几天的尝试，我终于设法解决了这个问题。我发现，这不是材料 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"
于 2021-04-11T23:47:39.377 回答