React MaterialUI: createSvgIcon is not a function

Viewed 3151

I am trying to use MaterialUI's Autocomplete component for React. Everything looks hunky-dory in the editor, and compiles just fine. However I get the following runtime error:

app.js:42207 Uncaught TypeError: (0 , _utils.createSvgIcon) is not a function
    at Object.393.@babel/runtime/helpers/interopRequireWildcard (app.js:42207)
    at o (app.js:6)
    at app.js:6
    at Object.<anonymous> (app.js:41216)
    at Object.390.../internal/svg-icons/ArrowDropDown (app.js:42145)
    at o (app.js:6)
    at app.js:6
    at Object.391../Autocomplete (app.js:42167)
    at o (app.js:6)
    at app.js:6

The code (FWIW):

  import TextField from '@material-ui/core/TextField';
  import Autocomplete from '@material-ui/lab/Autocomplete';
  ...

  <Autocomplete
    id="edit-var"
    freeSolo
    options={props.existing}
    renderInput={params => (
      <TextField
        {...params}
        label="Variable"
        margin="normal"
        variant="outlined"
        value={props.variable.name}
        autoFocus={true}
        onChange={e => props.onUpdate({ ...props.variable, name: e.currentTarget.value })}
      />
    )}
  />

I am using React 16.12.0. MaterialUI packages installed:

    "@material-ui/core": "^4.8.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
1 Answers

You probably have a wrong version of @material-ui/icons installed.

Try removing the package-lock.json and the node_modules folder and run npm install again.

Related