You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

无需Node.js使用MUI X:如何获取/构建独立Bundle?

问题:在无Node.js的浏览器环境使用MUI X RichTreeView

背景与已实现的方案

我已经能在不依赖Node.js的浏览器环境中使用React和Material-UI,示例代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const { Button } = MaterialUI;
        function App() { return (<Button>Hello World!</Button>); }
        ReactDOM.render(<App />, document.getElementById("root"));
    </script>
</body>
</html>

遇到的问题

但我实际需要使用MUI X的RichTreeView组件,发现MUI X并未提供打包好的UMD包。尝试以下代码时出现报错:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const { RichTreeView } = MaterialUI;
        function App() { return (<RichTreeView />); }
        ReactDOM.render(<App />, document.getElementById("root"));
    </script>
</body>
</html>

报错信息:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

提问

  • 是否存在现成的可本地引入的MUI X UMD包?
  • 如果没有,如何自行构建一个独立的mui-x.js文件?我的项目是类桌面浏览器应用,可以接受为构建该Bundle临时安装后端工具,但后续无需依赖这些工具。

内容的提问来源于stack exchange,提问作者ABu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 02:59:52