[icons] Only ship ES modules

[eps1lon]

@material-ui/icons no longer ships with CommonJS modules. We now ship standard compliant ES6 modules.

This reduces install size from package size from 15.6 MB to 6.7 MB and packed size (relevant when fetching the package from package registries causing #26240) from 1.7 MB to 1.2 MB. Note that this only affects the size relevant to development. The bundle shipped to your users should should have negligible size differences.

BREAKING CHANGE

The require() of @material-ui/icons is no longer supported. This should not affect you if you're using a bundler like webpack or snowpack or meta frameworks like next or gatsby.

Closes #26240

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against c3f374d

[oliviertassinari]

The package built by codesandbox-ci works with CRA. The size of the archive goes from 1.7 MB to 1.2 MB gzipped, and the uncompressed size from 15.6 MB to 7.2 MB. This looks awesome 🚀!

[oliviertassinari]

@eps1lon Is there any blocker to push this PR further? What do you think about releasing the changes and wait for the community to try it out to gather the limitations?

[eps1lon]

What do you think about releasing the changes and wait for the community to try it out to gather the limitations?

Our users are not Guinea pig

[oliviertassinari]

Our users are not Guinea pig

@eps1lon I meant for the alpha release channel, not the stable one. It seemed to be effective and efficient and with little downsides, but OK. As long as we are no overcareful/perfectionist, fair enough 👍 .

[oliviertassinari]

It looks great 🚀, two questions:

• publishConfig.exports and exports have the same value in the package.json. Why do we need the duplication?
• We usually don't mention the .js extension in the imports. Why is an implicit extension not enough?

[eps1lon]

publishConfig.exports and exports have the same value in the package.json. Why do we need the duplication?

They should not have the same value. This is what I'm seeing (old: exports, new: publishConfig.exports) when checking out the latest state:

"exports": {
-  ".": "./lib/index.js",
+  ".": "./index.js",
-  "./*": "./lib/*.js",
+  "./*": "./*.js",
   "./utils/*": null
},

We usually don't mention the .js extension in the imports. Why is an implicit extension not enough?

Because ES modules need the full file path.

[oliviertassinari]

They should not have the same value.

OK, it's not a direct duplication, you are right. Would it make sense automatically rewrite the exports? It seems that it's about the lib prefix and deterministic.

Because ES modules need the full file path.

Oh wow, I didn't know that!

[eps1lon]

It seems that it's about the lib prefix and deterministic.

Maybe it is. We'll see. There's no value in thinking about abstraction with this little information.

[eps1lon]

@oliviertassinari I have reverted your change to the PR description

[oliviertassinari]

The new description: "The require() of" looks less confusing than "require of" 👍 .

[jerryhuang3]

Upgrading to alpha 36 of @material-ui/icons seems to breaks Next.js apps cause it doesn't support ESM natively. To get around, I had to either dynamically import each icon and disable ssr or transpile as referenced in vercel/next.js#25423 (comment)

[eps1lon]

Upgrading to alpha 36 of @material-ui/icons seems to breaks Next.js apps cause it doesn't support ESM natively. To get around, I had to either dynamically import each icon and disable ssr or transpile as referenced in vercel/next.js#25423 (comment)

Thanks for the report. We've accidentally set up our integration tests incorrectly and didn't catch that.

We'll revert it for now (probably 1 week till release) until we come up with a fix.

[oliviertassinari]

@jerryhuang3 How do you reproduce? I have tried our main next.js example, which includes one icon and it behaves correctly. The icons is inlined, with an import, it fails:

diff --git a/examples/nextjs/src/ProTip.js b/examples/nextjs/src/ProTip.js
index 3d7e09703b..1eedf12ff8 100644
--- a/examples/nextjs/src/ProTip.js
+++ b/examples/nextjs/src/ProTip.js
@@ -1,15 +1,7 @@
 import * as React from 'react';
 import Link from '@material-ui/core/Link';
-import SvgIcon from '@material-ui/core/SvgIcon';
 import Typography from '@material-ui/core/Typography';
-
-function LightBulbIcon(props) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
-    </SvgIcon>
-  );
-}
+import LightBulbIcon from '@material-ui/icons/LightBulb';

 export default function ProTip() {
   return (