Module not found: Can't resolve './utils/createSvgIcon'

Definitely could just be me but it seems like there’s a problem with typescript and @material-ui/icons.

I’m in a next.js typescript project with two dependencies: @material-ui/care and @material-ui/icons. When I try to import an icon component I get the error: “Module not found: Can’t resolve ‘./utils/createSvgIcon’ in ‘~/material-ui-bug/node_modules/@material-ui/icons’”

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

import MenuIcon from '@material-ui/icons/Menu'

and use it in a component, <MenuIcon />, I get the following error:

event - compiled successfully
event - build page: /
wait  - compiling...
error - ./node_modules/@material-ui/icons/Menu.js
Module not found: Can't resolve './utils/createSvgIcon' in '/Users/sheats/material-ui-bug/node_modules/@material-ui/icons'
Error: Cannot find module './utils/createSvgIcon'
Require stack:
- ~/material-ui-bug/node_modules/@material-ui/icons/Menu.js
- ~/material-ui-bug/.next/server/static/development/pages/index.js
- ~/material-ui-bug/node_modules/next/dist/next-server/server/require.js
- ~/material-ui-bug/node_modules/next/dist/next-server/server/load-components.js
- ~/material-ui-bug/node_modules/next/dist/next-server/server/api-utils.js
- ~/material-ui-bug/node_modules/next/dist/next-server/server/next-server.js
- ~/material-ui-bug/node_modules/next/dist/server/next.js
- ~/material-ui-bug/node_modules/next/dist/server/lib/start-server.js
- ~/material-ui-bug/node_modules/next/dist/cli/next-dev.js
- ~/material-ui-bug/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
    at Function.Module._load (internal/modules/cjs/loader.js:686:27)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (~/material-ui-bug/node_modules/@material-ui/icons/Menu.js:12:45)
    at Module._compile (internal/modules/cjs/loader.js:955:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
    at Module.load (internal/modules/cjs/loader.js:811:32)
    at Function.Module._load (internal/modules/cjs/loader.js:723:14)
    at Module.require (internal/modules/cjs/loader.js:848:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at eval (webpack-internal:///@material-ui/icons/Menu:1:18)
    at Object.@material-ui/icons/Menu (~/material-ui-bug/.next/server/static/development/pages/index.js:313:1)
    at __webpack_require__ (~/material-ui-bug/.next/server/static/development/pages/index.js:23:31)
    at eval (webpack-internal:///./pages/index.tsx:7:81)
    at Module../pages/index.tsx (~/material-ui-bug/.next/server/static/development/pages/index.js:290:1) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '~/material-ui-bug/node_modules/@material-ui/icons/Menu.js',
    '~/material-ui-bug/.next/server/static/development/pages/index.js',
    '~/material-ui-bug/node_modules/next/dist/next-server/server/require.js',
    '~/material-ui-bug/node_modules/next/dist/next-server/server/load-components.js',
    '~/material-ui-bug/node_modules/next/dist/next-server/server/api-utils.js',
    '~/material-ui-bug/node_modules/next/dist/next-server/server/next-server.js',
    '~/material-ui-bug/node_modules/next/dist/server/next.js',
    '~/material-ui-bug/node_modules/next/dist/server/lib/start-server.js',
    '~/material-ui-bug/node_modules/next/dist/cli/next-dev.js',
    '~/material-ui-bug/node_modules/next/dist/bin/next'
  ]
}
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/@material-ui/icons/Menu.js
Module not found: Can't resolve './utils/createSvgIcon' in '/Users/sheats/material-ui-bug/node_modules/@material-ui/icons'

Expected Behavior 🤔

I should see an icon on the page.

Steps to Reproduce 🕹

I’ve put together a minimal repo that shows the problem here: https://github.com/sheats/material-ui-bug

1. yarn create next-app – use the with-typescript example
2. cd material-ui-bug
3. yarn add @material-ui/core @material-ui/icons
4. Add icon usage like this to pages/index.ts:
5. yarn dev

And for the record, it also happens in my other project where we’ve already set up everything documented here

[vijayusa11]

I just install once again all things npm i @material-ui/core npm i @material-ui/icons npm i @material-ui/utils

And problem was automatically solved.

[johnarumemi]

@VuslatSena you probably resolved this a long time ago, but I will put this answer down here for anyone else who googles this in the future. in version 4.4.3 if you go into node_modules/@material-ui/icons/utils there is a createSvgIcon.js file with a fully defined createSvgIcon fuction that is exported as the default object. Hence for my purposes (codebase I use had a very old material-ui/core) this version of material-ui/icons worked for me. Now for material-ui/icons 4.11.3 in node_modules/@materia-ui/icons/utils/createSvgIcon.js , there is no function defined in there, rather it requires in a createSvgIcon function from @material-ui/core/utils !, for my old version of material-ui/core this did not obviously exsist. Hence there was a possible breaking change that occurred sometime between 4.43 - 4.11.3 . For reference the codebase I work on use @material-ui/core v1. This whole issue goes away of you use latest @material-ui/core v4 with latest @material-ui/icons >=4.11.3 (or some icons version from when the change was introduced).