Compile error using the Component Lab > Autocomplete feature for SVG Icons in Material UI

Question

I got the following error when I ran my project on the browser:

Failed to compile:

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

I'm trying to implement the Autocomplete component (from the example in the "Multiple values" section).

Here is the code I'm using:

import React from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';

<Autocomplete
        multiple
        id="tags-standard"
        options={top100Films}
        getOptionLabel={(option) => option.title}
        defaultValue={[top100Films[13]]}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Multiple values"
            placeholder="Favorites"
          />
        )}
      />

I tried to install SVG Icons by NPM:

npm install @material-ui/icons

And then importing them to my TypeScript:

import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';

But I still have the error above. How can I resolve this issue?

Answer 1

Can you try to update @material-ui/core by running

npm update

Answer 2

As described in the Material-UI project CHANGELOG of the latest version (which is v4.9.9 the time I'm writing this answer), there is a change related to createSvgIcon

The complete conversation of team can be found here.

When I encountered the problem?

When running a React project and I wanted to use the Autocomplete component from @material-ui/lab.

How I solved it?

I upgraded @material-ui/core package to v4.9.9 using this command:

yarn upgrade @material-ui/core --latest