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.

Sign up for GitHub

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

Jump to bottom

[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
@DiegoAndai
Labels
breaking change core Infrastructure work going on behind the scenes package: material-ui Specific to @mui/material
Milestone
Material UI: v6

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Feb 5, 2024 •
edited
Loading

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
This was referenced Feb 5, 2024
Closed
Closed
Closed
Closed
@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 •
edited
Loading

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>

@Janpot Janpot mentioned this issue May 8, 2024
Merged
1 task
@ZeeshanTamboli ZeeshanTamboli mentioned this issue May 9, 2024
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@DiegoAndai DiegoAndai

Labels
breaking change core Infrastructure work going on behind the scenes package: material-ui Specific to @mui/material
Projects
Material UI
Status: Done
Milestone
Material UI: v6
Development

Successfully merging a pull request may close this issue.

[material-ui] Remove UMD bundle ZeeshanTamboli/material-ui
3 participants
@oliviertassinari @mnajdova @DiegoAndai