[🐛] 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.