Metro 遇到错误：尝试解析模块 `clsx`... ...指定无法解析的 `main` 模块字段

Question

我正在尝试将react expo与material ui一起使用来创建健身房日志应用程序，但当我尝试使用material ui中的任何内容时无法克服此错误。我运行的是 Windows 11、node.js 18.18.1，并且在导航预设上使用“npx create-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、npmaudit fix 以及使用 --force、删除 package-lock.json 和 node_modules 并运行 npm install、使用 node.js 20.8.1 以及更改 Metroconfig.js。我不知道如何更改 Material-ui 的版本或在此处做出反应。我尝试过的一些解决方案如下：

Metro 遇到错误：尝试解析模块“firebase”时 https://github.com/react-native-camera/react-native-camera/issues/2626 https://www.youtube.com/watch?v=wbkEhfWotm8

Answer 1

不幸的是，MUI 组件库（包括 Material UI 和 MUI X）与 React Native 不兼容。它们仅为网络平台而设计。