0

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: enter image description here

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

Now I executed the gulp serve where I am getting below is error in console enter image description here

Below error in webpart enter image description here

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?

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.