Can't use Material-UI on React app inside a Visual Studio C# ASP. NET Core Web Application

Viewed 592

I had created a new .NET Core web application with the React and Redux template. Everything is working fine with the exception that when I install the Material-UI library in my ClientApp folder (the one who has the react project) and import a component from the library, the app throws the next error:

TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function

My package.json looks like this:

{
  "name": "Evento",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "bootstrap": "^3.4.1",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-bootstrap": "^0.24.4",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.8",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "rimraf": "^2.6.2"
  },
  "scripts": {
    "start": "rimraf ./build && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

And the component from which I want to import a Material UI Button looks like this:

import React, { Component } from 'react';
import { Button } from '@material-ui/core';

export default class Main extends Component {
    render() {
        return (
            <div>Hello world!</div>
        );
    }
}

Why is this happening and what can I do to solve it?

1 Answers

You need to update React. v16.0.0 is too old for Material UI 4.11. You should update React and React DOM to at least 16.8.0:

npm update react react-dom

Make sure you restart your app afterward so Webpack can rebundle the new version.

Related