[material-ui] Remove UMD bundle

oliviertassinari commented 3 months ago

Summary

We introduced the UMD build https://mui.com/material-ui/getting-started/installation/#cdn to allow developers to easily play around with Material UI's API. This was pre-CodeSandbox/StackBlitz era. Almost 10 years ago.

Nowadays, we can use ESM CDNs

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    />
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/react@18.3.0",
          "react/jsx-runtime": "https://esm.sh/react@18.3.0/jsx-runtime"
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Usage -->
    <script type="text/babel" data-type="module">
      import * as React from "https://esm.sh/react@18.3.0";
      import { createRoot } from "https://esm.sh/react-dom@18.3.0";
      import { Button } from "https://esm.sh/@mui/material?external=react";

      function App() {
        return <Button variant="contained">Button</Button>;
      }

      createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>

https://codepen.io/oliviertassinari/pen/vYPrrJb?editors=1000

To configure emotion, developers would need to use the external feature of esm https://esm.sh/#docs

Examples

We need to

remove the bundle
update https://github.com/mui/material-ui/tree/master/examples/material-ui-via-cdn
update https://mui.com/material-ui/getting-started/installation/#cdn

Context

Closed as not planned:

Search keywords: Remove UMD

DiegoAndai commented 2 months ago

Hey @oliviertassinari, I tried your codepen but the button is not showing, do you know why that might be?

oliviertassinari commented 2 weeks ago

React is removing its UMD build: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed.

@DiegoAndai The error in the console is:

So the first thing you want to do is disable source map, source maps are a huge mess for debugging this type of problem. Once done, it becomes a lot more clear:

The problem is that it loads different versions of React.

The solution is to enforce the same version. The docs https://esm.sh/#docs explain how. First, I have tried to use ?deps=react but it's broken, it doesn't propagate this to dependencies of dependencies. So instead, I'm relying on import maps; also documented there with ?externals. Example updated, it works now.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    />
+   <script type="importmap">
+     {
+       "imports": {
+         "react": "https://esm.sh/react@18.3.0",
+         "react/jsx-runtime": "https://esm.sh/react@18.3.0/jsx-runtime"
+       }
+     }
+   </script>
  </head>
  <body>
    <div id="root"></div>
    <!-- Babel -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- Usage -->
    <script type="text/babel" data-type="module">
-     import * as React from "https://esm.sh/react";
-     import { createRoot } from "https://esm.sh/react-dom";
-     import { Button } from "https://esm.sh/@mui/material";
+     import * as React from "https://esm.sh/react@18.3.0";
+     import { createRoot } from "https://esm.sh/react-dom@18.3.0";
+     import { Button } from "https://esm.sh/@mui/material?external=react";

      function App() {
        return <Button variant="contained">Button</Button>;
      }

      createRoot(document.getElementById("root")).render(<App />);
    </script>
  </body>
</html>

mui / material-ui