Expo项目GetStream React SDK兼容及style-to-object构建错误排查

我正在开发一款适配Web、Android和iOS的Expo应用，包含表单及基于GetStream的客服聊天功能。由于GetStream的Expo SDK不兼容Web，我改用了React SDK，开发阶段Web和移动端均正常，但构建时出现如下错误：

Web Bundling failed 18359ms
Web ./index.js ▓▓▓▓▓▓▓░░░░░░░░░ 47.2% ( 881/1323)
Error: While trying to resolve module `style-to-object` from file `C:\Users\bhame\Hichem\expertify\Heracles\node_modules\react-markdown\lib\ast-to-react.js`, the package `C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\index.mjs`. Indeed, none of these files exist:

  * C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\index.mjs(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs)
  * C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\index.mjs\index(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs)
Error: While trying to resolve module `style-to-object` from file `C:\Users\bhame\Hichem\expertify\Heracles\node_modules\react-markdown\lib\ast-to-react.js`, the package `C:\Users\bhame\Hichem\experever, this package itself specifies a `main` module field that could not be resolved (`C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\index.mjs`. Indeed, none of these files exist:

  * C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\index.mjs(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs)
  * C:\Users\bhame\Hichem\expertify\Heracles\node_modules\style-to-object\index.mjs\index(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs)
    at DependencyGraph.resolveDependency (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\node-haste\DependencyGraph.js:289:17)
    at Object.resolve (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\lib\transformHelpers.js:169:21)
    at Graph._resolveDependencies (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\DeltaBundler\Graph.js:473:35)
    at Graph._processModule (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\DeltaBundler\Graph.js:261:38)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Graph._addDependency (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
    at async Promise.all (index 10)
    at async Graph._processModule (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\DeltaBundler\Graph.js:322:5)
    at async Graph._addDependency (C:\Users\bhame\Hichem\expertify\Heracles\node_modules\metro\src\DeltaBundler\Graph.js:372:20)
    at async Promise.all (index 1)

项目的package.json配置如下：

{
  "name": "heracles",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^19.0.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-native-community/netinfo": "9.3.10",
    "@react-native-picker/picker": "2.4.10",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/stack": "^6.3.17",
    "@rneui/base": "^4.0.0-rc.8",
    "@rneui/themed": "^4.0.0-rc.8",
    "axios": "^1.5.0",
    "expo": "~49.0.8",
    "expo-av": "~13.4.1",
    "expo-checkbox": "~2.4.0",
    "expo-constants": "~14.4.2",
    "expo-dev-client": "~2.4.8",
    "expo-document-picker": "~11.5.4",
    "expo-image-manipulator": "~11.3.0",
    "expo-image-picker": "~14.3.2",
    "expo-media-library": "~15.4.1",
    "expo-sharing": "~11.5.0",
    "expo-status-bar": "~1.6.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-google-places-autocomplete": "^2.5.1",
    "react-native-popup-dialog": "^0.18.3",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^10.0.0",
    "react-native-web": "~0.19.6",
    "stream-chat": "^8.11.0",
    "stream-chat-expo": "^5.17.0",
    "stream-chat-react": "^10.9.1",
    "style-to-object": "^0.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/plugin-transform-export-namespace-from": "^7.22.11",
    "@types/react": "~18.0.14",
    "typescript": "^5.1.3"
  },
  "private": true
}

1. Expo项目中是否可以使用GetStream React SDK？ #

可以使用，但需要做好平台适配：

• GetStream React SDK核心面向Web环境，在Expo移动端（Android/iOS）运行时，部分依赖DOM API的组件可能出现兼容性问题
• 建议采用条件导入策略：Web端加载stream-chat-react，移动端仍使用stream-chat-expo，通过Platform.OS判断切换对应SDK的组件
• 你的项目同时安装了stream-chat-expo和stream-chat-react，需确保代码中严格区分平台逻辑，避免移动端误加载Web端组件引发冲突

2. 如何修复构建过程中的style-to-object错误？ #

该错误源于Metro bundler无法解析style-to-object@0.4.2中的ES模块（.mjs格式），以下是几种可行的修复方案：

方案1：修改Metro配置支持.mjs文件 #

在项目根目录创建或修改metro.config.js，添加对.mjs扩展名的支持：

const { getDefaultConfig } = require('@expo/metro-config');

const config = getDefaultConfig(__dirname);

// 添加.mjs到解析扩展名列表
config.resolver.sourceExts.push('mjs');

module.exports = config;

方案2：降级style-to-object版本 #

style-to-object@0.4.x采用ES模块格式，降级到使用CommonJS的0.3.0版本可规避解析问题：

npm install style-to-object@0.3.0 --save

方案3：调整babel配置（备选） #

若上述方案无效，可尝试添加babel插件处理ES模块：

1. 安装babel-plugin-transform-es2015-modules-commonjs
2. 在babel.config.js中配置：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      '@babel/plugin-transform-export-namespace-from',
      'transform-es2015-modules-commonjs'
    ]
  };
};

内容的提问来源于stack exchange，提问作者Hichem BEN HAMED