Material-ui: Material-UI: [email protected] or greater is required

[monsieurluffy]

I am trying to upgrade from v0.20 to v1.2 but I am having this error in

Modal.js:90 Uncaught Error: Material-UI: [email protected] or greater is required.
    at eval (Modal.js:90)

The error is coming from here

if ("development" !== 'production' && !_react.default.createContext) {
  throw new Error('Material-UI: [email protected] or greater is required.');
}

I just tried it in a simple code file without any reference to existing code

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';

function rand() {
    return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
    const top = 50 + rand();
    const left = 50 + rand();

    return {
        top: `${top}%`,
        left: `${left}%`,
        transform: `translate(-${top}%, -${left}%)`,
    };
}

const styles = theme => ({
    paper: {
        position: 'absolute',
        width: theme.spacing.unit * 50,
        backgroundColor: theme.palette.background.paper,
        boxShadow: theme.shadows[5],
        padding: theme.spacing.unit * 4,
    },
});

class SimpleModal extends React.Component {
    state = {
        open: false,
    };

    handleOpen = () => {
        this.setState({ open: true });
    };

    handleClose = () => {
        this.setState({ open: false });
    };

    render() {
        const { classes } = this.props;

        return (
            <div>
                <Typography gutterBottom>Click to get the full Modal experience!</Typography>
                <Button onClick={this.handleOpen}>Open Modal</Button>
                <Modal
                    aria-labelledby="simple-modal-title"
                    aria-describedby="simple-modal-description"
                    open={this.state.open}
                    onClose={this.handleClose}
                >
                    <div style={getModalStyle()} className={classes.paper}>
                        <Typography variant="title" id="modal-title">
                            Text in a modal
                        </Typography>
                        <Typography variant="subheading" id="simple-modal-description">
                            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                        </Typography>
                        <SimpleModalWrapped />
                    </div>
                </Modal>
            </div>
        );
    }
}


// We need an intermediary variable for handling the recursive nesting.
const SimpleModalWrapped = withStyles(styles)(SimpleModal);

ReactDOM.render(
    <SimpleModal/>,
  document.getElementById('upgradetest'));

Is there anything else that needs to be upgraded?

Tech | Version
-- | --
Material-UI | v1.2.2
React | v16.4.1
Webpack | v4.12
Babel | 6.26

[oliviertassinari]

Check your dependency tree. It's very likely that you are not using React 16.3.0 or greater. Having 16.2.0 is enough to trigger this error.

[monsieurluffy]

That was the issue, thanks for the help

[nphillips78]

I'm having this same issue but I'm running 16.5.0 - any ideas?

[oliviertassinari]

@nphillips78 Make sure you are not using two different versions of React.

[dennmat]

Running into this right now.

> const React = require('react');
undefined
> React.version
'16.6.3'
> React.default
undefined
> React.createContext
[Function: createContext]
>

I'm far from knowledgeable on all this, but the version check that material-ui is attempting to do doesn't seem up-to-date or I'm missing something.

On second thought this would throw a TypeError before it would hit the throw in material-ui.
Curious, it must be using a different react but I cannot find how for the life of me. Ignore this. Will continue digging.

[eps1lon]

@dennmat Please be aware that the posted line is from the transpiled code. The actual check is simply React.createContext.

[dennmat]

@eps1lon Thanks for the heads up, I eventually realized this to be the case after finding the code on GitHub.

For anyone that runs into this issue that didn't have many versions of React in their dependency tree. I was able to resolve this by no longer using Parcel and instead switching to Webpack 4. I didn't deep dive into what the issue was, but by switching to Webpack with no other changes the error is gone.