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

Question

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 and react-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.

Pavindu · Accepted Answer · 2021-06-13T09:57:05.370

Well, I finally managed to solve the problem, after trying for several days. As I found out, it was not a problem with material ui, but with the Create React App. This Github issue comment helped me to solve my problem.

For extra clarity, I will quote the issue comment in this answer itself, so that it will remain here even if the comment gets deleted.

^ 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

Then, modify the start script as follows.

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

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

1 Answers1