[🐛] Cannot read property of undefined -> migrating from v6 to v8

[mishkeTz]

Issue

I'm upgrading stream-chat-react-native from v6 to v8. I'm facing some issues when running my app (iOS). It seems strange and I'm stuck and not sure why I have these kind of errors.

Expected behavior

iOS app should run properly as before after updating and migrating from v6 to v8 by following migration guide and instructions.

Project Related Information

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Click To Expand

package.json:

"react-native": "0.77.0",
"stream-chat-react-native": "^8.10.0",
 "@react-native-camera-roll/camera-roll": "^7.10.2",
"@react-native-clipboard/clipboard": "^1.16.3",
"@react-native-community/netinfo": "^11.3.3",
"@react-native-documents/picker": "^10.1.7",
"react-native-blob-util": "0.22.0",
"react-native-gesture-handler": "2.25.0",
"react-native-haptic-feedback": "^2.2.0",
"react-native-image-picker": "^8.2.1",
"react-native-nitro-modules": "^0.31.10",
"react-native-nitro-sound": "^0.2.10",
"react-native-reanimated": "3.17.3",
"react-native-svg": "^15.11.2",
"react-native-video": "^6.18.0",

react-native info output:

System:
  OS: macOS 15.5
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 260.02 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.9.0
    path: ~/.nvm/versions/node/v20.9.0/bin/node
  Yarn:
    version: 1.22.18
    path: /usr/local/bin/yarn
  npm:
    version: 10.1.0
    path: ~/.nvm/versions/node/v20.9.0/bin/npm
  Watchman:
    version: 2025.05.26.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23726.103.2422.13103373
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /Users/nikola/.jenv/shims/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.77.0
    wanted: 0.77.0
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • 8.10.0
• Device/Emulator info:
  • Device/Emulator: iPhone 16 Pro Max

Additional context

I believe the real issue is that for some reason imports are not working anymore and there's always an error importing from undefined even though in IDE everything seems fine.

i.e. I have imports like in my app:
import { OverlayProvider } from 'stream-chat-react-native';

However the most suspicious is an error coming directly from stream-chat-react-native/src/optionalDependencies/Audio.ts where it's complaining about AudioEncoderAndroidType import.

Screenshots

Click To Expand

---

[mishkeTz]

As a debugging fix, I was able to run the app if I removed the following imports and just added types directly in the Audio.ts file.

import {
  // AudioEncoderAndroidType,
  RNCLIAudioRecordingConfiguration as AudioRecordingConfiguration,
  // AudioSourceAndroidType,
  // AVEncoderAudioQualityIOSType,
  // AVEncodingOption,
  // AVModeIOSOption,
  // AVModeIOSOptionNitroSound,
  // OutputFormatAndroidType,
  RNCLIRecordingOptions as RecordingOptions,
} from 'stream-chat-react-native-core';

enum AVModeIOSOptionNitroSound {
  gamechat = 'gameChatAudio',
  measurement = 'measurement',
  movieplayback = 'moviePlayback',
  spokenaudio = 'spokenAudio',
  videochat = 'videoChat',
  videorecording = 'videoRecording',
  voicechat = 'voiceChat',
  voiceprompt = 'voicePrompt',
}

...

Just copied those enum imports that were throwing an error. But this is not really a proper solution, I still don't know what the actual issue is.

[mishkeTz]

The actual problem with my setup where I use nativeWind is the code when there is a mixture of using import/export and require in one file.

I.e. in Thread.tsx:

try {
  FlashList = require('@shopify/flash-list').FlashList;
} catch {
  FlashList = undefined;
}

this causes my app to break on a runtime and makes all imports as undefined in that file and is not able to resolve it.

[khushal87]

Hey @mishkeTz, so if I get it correctly, you were able to resolve the issue by now, right?

[mishkeTz]

I fixed it, however had to adapt the babel.config.js file a bit.

[khushal87]

Okay, what was the fix? can you share it please so that we know it? Also, can we close it in that case?

[fossage]

@mishkeTz , I'm experiencing the same issue. Can you share what your solution was?

[fossage]

I've finally figured out my issue. I would see the Object.defineProperty() called on non-object crash when mounting expo-image components alongside any Stream components.

Environment

• React Native 0.83.0
• Expo SDK 55 (expo-image ~55.0.1)
• stream-chat-react-native ^8.12.0

Root Cause

This is a circular dependency issue between Expo SDK 55's polyfill system and stream-chat-react-native-core's polyfills.

The chain of events:

• Expo SDK 55 registers a lazy getter for structuredClone via installGlobal() in runtime.native.ts
• When stream-chat-react-native-core loads, its polyfills.ts checks !window.structuredClone which triggers Expo's lazy getter
• The lazy getter calls require('@ungap/structured-clone').default
• @ungap/structured-clone has a conditional export at the module level:
  • This check re-triggers Expo's lazy getter before the first invocation completes
• Expo's installGlobal has protection against infinite loops via a valueSet flag, but this causes getValue() to return undefined prematurely
• The code then attempts Object.defineProperty(undefined, BUILTIN_SYMBOL, {...}) which throws:

Workaround

Eagerly install the structuredClonepolyfill before any Expo or stream-chat modules load. Add this near the top of your entry file (e.g., index.js, after gesture-handler but before other imports:

This satisfies both Expo's and stream-chat's polyfill checks, preventing the lazy getter from being installed in the first place.

// index.js

import 'react-native-gesture-handler';

// Force expo's structuredClone polyfill to resolve early, before stream-chat-react-native
// loads its own polyfill. This prevents a circular dependency crash between expo's lazy
// getter and @ungap/structured-clone's conditional export check.
if (typeof globalThis.structuredClone === 'undefined') {
  globalThis.structuredClone = require('@ungap/structured-clone').default
}

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);