material-ui 'createSvgIcon' is not exported from '@material-ui/core/utils'

javascript node.js reactjs material-ui
Salah Eddine Makdour picture Salah Eddine Makdour · Apr 10, 2020 · Viewed 11.1k times · Source

I have installed material-ui/lab in order to user the alert component, but whenever i import it with: import Alert from '@material-ui/lab/Alert'; it fails to compile and throws this error:

./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js
Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'.

So I tried to google this problem and found another question about the material-ui/lab/AutoComplete component (This question exactly) and the accepted answer was to update the material-ui/core to version 4.9.9, and it looks like it worked for the guy who asked, but sadly not for me, i have this versions of all the installed material-ui things:

    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.48",

so now i'm asking u guys if there is another way to solve this problem, thanks

Answer

Aram picture Aram · Apr 11, 2020

This issue is reported here and closed as the latest version of /core and lab fixes the issue: https://github.com/mui-org/material-ui/issues/20482

I had the same error and using this combination of versions fixed the problem:

"@material-ui/core": "^4.9.10"
"@material-ui/lab": "^4.0.0-alpha.49"

Hope this helps

Related questions

Reactjs - Form input validation

My Contact page form is as follows, <form name="contactform" onSubmit={this.contactSubmit.bind(this)}> <div className="col-md-6"> <fieldset> <input ref="name" type="text" size="30" placeholder="Name"/> <br/> <input …

Read More
React - changing an uncontrolled input

I have a simple react component with the form which I believe to have one controlled input: import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"&…

Read More
"React.Children.only expected to receive a single React element child" error when putting <Image> and <TouchableHighlight> in a <View>

I have the following render method in my React Native code: render() { const {height, width} = Dimensions.get('window'); return ( <View style={styles.container}> <Image style={{ height:height, width:width, }} source={require('image!foo')} resizeMode='cover' /> <…

Read More