Preact+TypeScript+Express集成MUI报错：InnerThemeProvider的children属性无效

1. 补全别名配置覆盖所有依赖场景 #

Webpack 配置 #

确保 resolve.alias 不仅映射 react 和 react-dom，还要补上 react/jsx-runtime——MUI 内部会调用这个模块，缺失会导致类型不匹配：

module.exports = {
  resolve: {
    alias: {
      'react': 'preact/compat',
      'react-dom': 'preact/compat',
      'react/jsx-runtime': 'preact/jsx-runtime'
    }
  }
};

tsconfig.json 配置 #

除了路径别名，还要修正 JSX 编译配置并强制使用 Preact 类型：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "preact",
    "paths": {
      "react": ["node_modules/preact/compat"],
      "react-dom": ["node_modules/preact/compat"]
    },
    "types": ["preact"]
  },
  "include": ["src/**/*"]
}

2. 校验 MUI 版本与依赖完整性 #

MUI v5+ 是对 Preact 兼容最好的版本，同时必须安装配套的 Emotion 依赖（MUI v5 默认基于 Emotion 构建）：

npm install @mui/material@latest @emotion/react@latest @emotion/styled@latest

避免使用 MUI v4，它对 Preact 的适配支持非常有限。

3. 修正 ThemeProvider 子组件传递逻辑 #

确保 ThemeProvider 的子元素是合法的 Preact 元素，不要传递非 ReactNode 类型的内容：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import Button from '@mui/material/Button';

const theme = createTheme();

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 仅传递合法的 Preact 组件/元素 */}
      <Button variant="contained">测试 MUI 按钮</Button>
    </ThemeProvider>
  );
}

export default App;

4. 清除缓存并重新构建 #

缓存残留可能导致别名配置不生效，执行以下操作：

• 删除 node_modules、package-lock.json（或 yarn.lock）
• 重新安装依赖：npm install
• 启动开发服务器时添加 --no-cache 参数（针对 webpack-dev-server），或删除项目根目录的缓存目录（如 .webpack）

5. 升级 Preact 到最新稳定版 #

确保使用 Preact 10.5.0 及以上版本，更早的版本对 preact/compat 的 React 兼容实现不完善：

npm install preact@latest preact/compat@latest

内容的提问来源于stack exchange，提问作者Kyle Gendreau