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

• 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 😯

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.

[dhruv9499]

So which syntax we should use now onwards?