MaterialUI packages throwing error in SPFx solution

Question

Environment: SPFx with Office 365

I have created a SPFx solution with 1.8 as @microsoft/sharepoint version. I am trying to utilize material UI. so I have installed npm install @material-ui/core into my SPFx solution. I have added references to my .tsx file as

import { createStyles, makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';

In render method i just simple written as

return (
    <div>
      <Card></Card>
    </div>
  );

In browser console I am getting errors as below:

I thought because of materilUI has react version dependency i have updated them to latest. My package.json file looks below

Now I executed the gulp serve where I am getting below is error in console

Below error in webpart

What is the resolution for this. I am trying to resolve this from 8hrs. I am not finding anyway. Please suggest me are there any dependencies that I need to install in the solution?

Answer 1

When using the SharePoint Framework to build react-based solutions, you must use the exact react version that ships with the version of SPFx you are using.
The main reason being that SharePoint and SPFx do many optimizations and want to avoid version conflicts on the page. It also helps them provide support.
SPFx version 1.8.2 ships with react 16.7.0 and react-dom 16.7.0.
The solution would be to install back the proper versions of react, react-dom and other dependencies you might have changed. Then install a version of material-ui that runs on react 16.7.0.