我试图使用react expo和material ui来创建一个健身房日志应用程序，但是当我尝试在material ui中使用任何东西时，都无法克服这个错误。我运行的是windows 11，node.js18.18.1，在导航预置中使用“npx nap-expo-app --template”。我注意到该应用程序在创建时就有7个漏洞，但它们似乎与此问题无关。我从material ui中添加了一些组件到index.js中，并按照文档中的安装说明安装它们的依赖项。

import { StyleSheet } from 'react-native';

import EditScreenInfo from '../../components/EditScreenInfo';
import { Text, View } from '../../components/Themed';
import { DataGrid, GridRowsProp, GridColDef  } from '@mui/x-data-grid';

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function TabOneScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One</Text>
      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
      <EditScreenInfo path="app/(tabs)/index.tsx" />
      <DataGrid rows={rows} columns={columns}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: '80%',
  },
});

在我运行npm run web之后，它在终端中给了我这个：

Web Bundling failed 4606ms
Unable to resolve "clsx" from "node_modules\@mui\x-data-grid\components\columnHeaders\GridBaseColumnHeaders.js"
Web node_modules\expo-router\node/render.js ▓▓▓▓▓▓▓▓▓░░░░░░░ 58.3% (726/951)
Metro error: Metro has encountered an error: While trying to resolve module `clsx` from file `D:\Code\gym-log\webapp\gym-log\node_modules\@mui\x-data-grid\components\columnHeaders\GridBaseColumnHeaders.js`, the package `D:\Code\gym-log\webapp\gym-log\node_modules\clsx\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`D:\Code\gym-log\webapp\gym-log\node_modules\clsx\dist\clsx.mjs`. Indeed, none of these files exist:

  * D:\Code\gym-log\webapp\gym-log\node_modules\clsx\dist\clsx.mjs(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css)
  * D:\Code\gym-log\webapp\gym-log\node_modules\clsx\dist\clsx.mjs\index(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css): D:\Code\gym-log\webapp\gym-log\node_modules\metro\src\node-haste\DependencyGraph.js (289:17)

我检查了clsx.mjs，它存在。在clsx的package.json中，我看到了这样的内容：

"name": "clsx",
  "version": "2.0.0",
  "repository": "lukeed/clsx",
  "description": "A tiny (234B) utility for constructing className strings conditionally.",
  "module": "dist/clsx.mjs",
  "unpkg": "dist/clsx.min.js",
  "main": "dist/clsx.js",...

所有这些文件都存在，所以我真的不知道这里出了什么问题。我检查了寻找类似的问题，但没有一个解决方案，为这个特定的情况下工作。到目前为止，我已经尝试了npm install，npm update，npm audit fix和--force，删除package-lock.json和node_modules并运行npm install，使用node.js 20.8.1，并更改metrolog.js。我看不出我如何改变material-ui的版本或在这里作出React。我尝试的一些解决方案如下：
Metro has encountered an error: While trying to resolve module 'firebase'https://github.com/react-native-camera/react-native-camera/issues/2626https://www.youtube.com/watch?v=wbkEhfWotm8