Expo项目使用material-table组件在模拟器运行时报错如何解决

安全阿岳

2026-10-3

报错原因

material-table是面向React Web场景开发的表格组件，其内置的PDF导出功能依赖jspdf库，Web环境支持代码中的动态异步require语法，但Expo/React Native原生运行环境仅支持静态导入规则，且模拟器运行时会优先加载jspdf的node环境版本，该版本的动态依赖调用不符合RN导入规范，因此会触发该报错，Web端运行不受影响。

解决方案

方案1：关闭material-table的导出功能（无需使用导出时优先选该方案）
在material-table组件的options配置中关闭导出按钮即可规避依赖加载问题，示例代码：
```
<MaterialTable
  // 其他原有props保持不变
  options={{
    exportButton: false,
    // 其他原有options配置保持不变
  }}
/>
```
方案2：配置Metro打包别名适配依赖
如果你需要使用导出功能，可在Expo项目的metro.config.js中新增别名配置，将jspdf指向适配非node环境的umd版本，配置示例：
```
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);
config.resolver.alias = {
  ...config.resolver.alias,
  // 映射jspdf到umd版本
  'jspdf': require.resolve('jspdf/dist/jspdf.umd.min.js')
};

module.exports = config;
```
配置完成后执行npx expo start --clear清空缓存重启项目即可。如果配置后仍有报错且不需要导出功能，也可以将jspdf映射到你自建的空垫片文件（文件内容仅需module.exports = {}）即可完全屏蔽该依赖加载。
方案3：更换适配React Native的表格组件
material-table未做React Native场景的兼容适配，若后续还出现其他依赖兼容问题，可替换为原生适配RN的表格组件，比如react-native-paper提供的DataTable组件，不存在Web专属依赖的兼容问题。