Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[material-ui] Remove UMD bundle #40960

Closed
oliviertassinari opened this issue Feb 5, 2024 · 2 comments · Fixed by #42172
Closed

[material-ui] Remove UMD bundle #40960

oliviertassinari opened this issue Feb 5, 2024 · 2 comments · Fixed by #42172
Assignees
Labels
breaking change core Infrastructure work going on behind the scenes package: material-ui Specific to @mui/material

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 5, 2024

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

Context

Closed as not planned:

Search keywords: Remove UMD

@oliviertassinari oliviertassinari added breaking change package: material-ui Specific to @mui/material status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 5, 2024
@DiegoAndai DiegoAndai assigned DiegoAndai and unassigned mnajdova Feb 6, 2024
@DiegoAndai DiegoAndai added this to the Material UI: v6 milestone Feb 6, 2024
@DiegoAndai DiegoAndai added core Infrastructure work going on behind the scenes and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 6, 2024
@DiegoAndai
Copy link
Member

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

Screenshot 2024-03-06 at 15 03 18

@oliviertassinari
Copy link
Member Author

oliviertassinari commented May 3, 2024

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:
SCR-20240504-ciei

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:

SCR-20240504-ciot

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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
breaking change core Infrastructure work going on behind the scenes package: material-ui Specific to @mui/material
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants