[icons-v5] Cannot use import statement outside a module

[numToStr]

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

Current Behavior 😯

After importing any icon from @materila-ui/icons@v5-alpha.13 I am getting the below error:

/home/hello/Documents/code/hrms/node_modules/@material-ui/icons/ArrowBackTwoTone.js:1
import * as React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.ygQx (/home/hello/Documents/code/hrms/packages/client/.next/server/pages/d/leaves/apply.js:1408:18)
    at __webpack_require__ (/home/hello/Documents/code/hrms/packages/client/.next/server/pages/d/leaves/apply.js:29:31)
    at Object.OErO (/home/hello/Documents/code/hrms/packages/client/.next/server/pages/d/leaves/apply.js:895:93) {
  type: 'SyntaxError'
}

This issue is only comming from icons, core is working fine.

Steps to Reproduce 🕹

I have just used the updated nextjs example and converted into typescript

https://codesandbox.io/s/nextjs-materialui-ts-wz93e

Your Environment 🌎

Tech	Version
Material-UI	v5-alpha.13
React	16.14.0
Browser	Chromium 86
TypeScript	4.0.3
Nextjs	9.5.5

[eps1lon]

Interesting. I just realized that we never actually supported ES modules for path imports like @material-ui/icons/ArrowBackTwoTone. Will investigate first thing tomorrow.

[oliviertassinari]

I think that @material-ui/icons should receive a special treatment, it's not a package like the other. Maybe we should?

• Deliver CommonJS only
• Ban:

  import { Close } from '@material-ui/icons';

How are FontAwesome / react-icons scaling to 5k+ icons? Say we want to provide 10k+ icons with the types, how to best architecture it?

[numToStr]

import { Close } from '@material-ui/icons';

I guess we all are aware of that using this syntax to import icons slows down the initial dev startup quite a bit.

I would prefer this syntax anyday over named imports for icons.

 import Close from '@material-ui/icons/Close';

[eps1lon]

We don't want to ban named import since this is the way forward. Tooling is just not there at the moment. There's no reason to ban it.

[oliviertassinari]

@eps1lon Ok, the current compromise looks great!

[dhruv9499]

So which syntax we should use now onwards?

[hazem-a1]

that works for me

const nextConfig = { transpilePackages: ['@mui/material'], // .... rest of config };