Compatibility Issue with Expo, GetStream, and Web Build: style-to-object Error

Question

I am working on an Expo application that needs to work on Web, Android, and iOS. The application consists of a simple form with a chat feature where you communicate with our support. We used GetStream to chat.

trouble: While trying to build the application, we faced an issue. The Expo SDK in GetStream is not compatible with the web browser, so we used the React SDK instead. Everything worked fine on web and mobile during development. However, when we tried to build, we received the following error:

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)

For more information, here is our 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
}

Questions: Is it possible to use React SDK for GetStream

1. List item in the Expo project?
2. How do I fix style-object error in the build process?

Any help would be greatly appreciated. thank you!

Answer 1

Thanks for bringing it up! This issue was fixed on our site in the meantime, so please see if it is working now.

It was fixed explicitly in version 10.10.0, so the issue should be resolved if you're using this or a later one.

When running into these types of issues in the future, a possible approach to take might be selective version resolutions (read more here).