Material-ui: Warning with SvgIcon

[jurepetrovic]

I'm getting a warning since upgrading from material-ui v3.9.3 to v4.4.1
I upgraded core and icons packages, checked code, everything seems fine.

Maybe babel or typescript issue?

`
./node_modules/@material-ui/icons/utils/createSvgIcon.d.ts 3:8
Module parse failed: Unexpected token (3:8)
You may need an appropriate loader to handle this file type.
| import SvgIcon from '@material-ui/core/SvgIcon';
|

declare function createSvgIcon(path: React.ReactNode, displayName: string): typeof SvgIcon;
|
| export default createSvgIcon;

./node_modules/@material-ui/icons/index.d.ts 4:5
Module parse failed: Unexpected token (4:5)
You may need an appropriate loader to handle this file type.
| import SvgIcon from '@material-ui/core/SvgIcon';
|

type SvgIconComponent = typeof SvgIcon;
|
| export const AccessAlarm: SvgIconComponent;

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
`

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.4.1 |
| React | v16.9.0 |
| Browser | chrome 76 |
| TypeScript | v3.6.2 |

[oliviertassinari]

@jurepetrovic Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[jurepetrovic]

Don't know how to put this in codesandbox.
It's a compilation warning from react-scripts.
And it doesn't mention any of my project files,
but a file from @material-ui/icons

Please look at this photo:
https://drive.google.com/open?id=1fdCrX2TsGCSFIRPSUybfaK_QLRcg5vOY

If you point me in the direction how to show compilation warning in codesandbox,
I'd be glad to do it...

Thank you for your help,
Jure

[joshwooding]

@jurepetrovic We really just need a way to reproduce it for ourselves. There are a lot of unknown things in this example. You can use codesandbox or even just provide a git repository.

[oliviertassinari]

@joshwooding Is right, this is not enough information for us to help. We will have to close the issue.

[lnorton89]

I get this warning when dynamically requiring icons like this:

const MaterialIcon = icon => {
  const iconName = icon.charAt(0).toUpperCase() + icon.slice(1);
  const resolved = require(`@material-ui/icons/${iconName}`).default;

  if (!resolved) {
    throw Error(`Could not find material-ui-icons/${iconName}`);
  }

  return React.createElement(resolved);
};

MaterialIcon('Facebook');

Maybe this isn't such a great way to do this? I'd love to hear your thoughts.

[mrefaie]

Same here I got this warning when dynamically loading icons:

const Icon = React.lazy(() => import(`@material-ui/icons/${icon}`));

[kaleem-elahi]

I am also using it like this, did someone found any solution to this ? Thanks

const DynamicMaterialIcon = (props) => {
  let emptySpan = <span />;
  try {
    let resolvedIcon = require(`@material-ui/icons/${props.icon}`).default;
    return React.createElement(resolvedIcon, { className: props.className });
  } catch (error) {
    return emptySpan;
  }
};
export default DynamicMaterialIcon;

@inorton89

[kaleem-elahi]

@oliviertassinari any idea how i could solve this issue ?