stream-chat-react-native
stream-chat-react-native copied to clipboard
GetStream
[🐛] Axios errors after react-native 0.79.1 upgrade
Issue
After updating to react-native version 0.79.1, there is a problem with the axios package.
I tried to nodeify the react-native project regarding this issue, but it continues to give other errors.
Steps to reproduce
Steps to reproduce the behavior:
- upgrade react-native 0.79.1
- build and run project
- See error
Error: Unable to resolve module url from .../node_modules/stream-chat/node_modules/axios/dist/node/axios.cjs: url could not be found within the project or in these directories:
node_modules/stream-chat/node_modules
node_modules
3 |
4 | const FormData$1 = require('form-data');
> 5 | const url = require('url');
| ^
6 | const proxyFromEnv = require('proxy-from-env');
7 | const http = require('http');
8 | const https = require('https');
Project Related Information
Offline support
- [X] 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:
{
"dependencies": {
"@baronha/react-native-multiple-image-picker": "^2.2.2",
"@chainplatform/react-native-htmlview": "0.17.5",
"@gorhom/bottom-sheet": "5.1.2",
"@invertase/react-native-apple-authentication": "2.4.1",
"@leeroy/react-native-parallax-scroll-view": "0.21.4",
"@notifee/react-native": "9.1.8",
"@op-engineering/op-sqlite": "12.0.0",
"@react-native-async-storage/async-storage": "2.1.2",
"@react-native-camera-roll/camera-roll": "7.10.0",
"@react-native-clipboard/clipboard": "1.16.2",
"@react-native-community/blur": "4.4.1",
"@react-native-community/netinfo": "11.4.1",
"@react-native-community/push-notification-ios": "1.11.0",
"@react-native-documents/picker": "10.1.2",
"@react-native-firebase/app": "21.13.0",
"@react-native-firebase/messaging": "21.13.0",
"@react-native-google-signin/google-signin": "13.2.0",
"@react-native-masked-view/masked-view": "0.3.2",
"@react-navigation/bottom-tabs": "7.3.10",
"@react-navigation/material-top-tabs": "7.2.10",
"@react-navigation/native": "7.1.6",
"@react-navigation/native-stack": "7.3.10",
"@react-navigation/stack": "7.2.10",
"@realm/react": "0.11.0",
"@shopify/flash-list": "1.8.0",
"@stream-io/react-native-webrtc": "125.0.8",
"@stream-io/video-react-native-sdk": "1.11.1",
"@types/diff": "7.0.2",
"axios": "1.9.0",
"dayjs": "1.11.13",
"diff": "7.0.0",
"formik": "2.4.6",
"fuzzysort": "3.1.0",
"i18next": "24.2.3",
"intl-pluralrules": "2.0.1",
"jotai": "2.12.3",
"jwt-decode": "4.0.0",
"lodash": "4.17.21",
"lottie-react-native": "7.2.2",
"openai": "4.93.0",
"react": "19.1.0",
"react-i18next": "15.4.1",
"react-native": "0.79.1",
"react-native-animated-pagination-dot": "0.4.0",
"react-native-asset": "2.1.1",
"react-native-audio-recorder-player": "3.6.12",
"react-native-awesome-gallery": "0.4.3",
"react-native-blob-util": "0.21.2",
"react-native-bouncy-checkbox": "4.1.2",
"react-native-calendars": "1.1310.0",
"react-native-callkeep": "4.3.16",
"react-native-clusterer": "3.0.0",
"react-native-compressor": "1.11.0",
"react-native-config": "1.5.5",
"react-native-controlled-mentions": "2.2.5",
"react-native-date-picker": "5.0.12",
"react-native-device-info": "14.0.4",
"react-native-draglist": "3.9.5",
"react-native-fast-shadow": "0.1.1",
"react-native-fs": "2.20.0",
"react-native-gesture-handler": "2.25.0",
"react-native-get-random-values": "1.11.0",
"react-native-haptic-feedback": "2.3.3",
"react-native-image-picker": "8.2.0",
"react-native-inappbrowser-reborn": "3.7.0",
"react-native-incall-manager": "4.2.0",
"react-native-keyboard-controller": "1.17.0",
"react-native-keyboard-manager": "6.5.16-0",
"react-native-keychain": "10.0.0",
"react-native-linear-gradient": "2.8.3",
"react-native-loading-dots": "1.4.0",
"react-native-localize": "3.4.1",
"react-native-maps": "1.20.1",
"react-native-nitro-modules": "0.22.1",
"react-native-pager-view": "6.7.0",
"react-native-parsed-text": "0.0.22",
"react-native-permissions": "5.3.0",
"react-native-progress": "5.0.1",
"react-native-quick-base64": "2.1.2",
"react-native-reanimated": "3.17.3",
"react-native-reanimated-carousel": "4.0.2",
"react-native-reanimated-skeleton": "1.5.1",
"react-native-render-html": "6.3.4",
"react-native-safe-area-context": "5.3.0",
"react-native-screens": "4.10.0",
"react-native-share": "12.0.9",
"react-native-skeleton-placeholder": "5.2.4",
"react-native-sound-player": "0.14.5",
"react-native-svg": "15.11.2",
"react-native-tab-view": "4.0.10",
"react-native-toast-message": "2.2.1",
"react-native-turbo-image": "1.22.3",
"react-native-vector-icons": "10.2.0",
"react-native-video": "6.12.0",
"react-native-video-player": "0.16.2",
"react-native-video-trim": "3.0.9",
"react-native-vision-camera": "4.6.4",
"react-native-voip-push-notification": "3.3.2",
"react-native-webview": "13.13.5",
"react-native-youtube-iframe": "2.3.0",
"realm": "12.14.2",
"stream-chat-react-native": "^6.7.3",
"supercluster": "8.0.1",
"transliteration": "2.3.5",
"typesense": "2.0.3",
"unsplash-js": "7.0.19",
"uuid": "11.1.0",
"yup": "1.6.1"
},
"devDependencies": {
"@babel/core": "7.26.10",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "7.25.9",
"@babel/plugin-transform-react-jsx": "7.25.9",
"@babel/preset-env": "7.26.9",
"@babel/preset-react": "7.26.3",
"@babel/preset-typescript": "7.27.0",
"@babel/runtime": "7.27.0",
"@eslint/js": "9.25.1",
"@jest/globals": "29.7.0",
"@react-native-community/cli": "16.0.2",
"@react-native/babel-preset": "0.79.1",
"@react-native/eslint-config": "0.79.1",
"@react-native/metro-config": "0.79.1",
"@react-native/typescript-config": "0.79.1",
"@types/jest": "29.5.14",
"@types/lodash": "4.17.16",
"@types/react": "19.1.2",
"@types/react-native-get-random-values": "1.8.2",
"@types/react-native-vector-icons": "6.4.18",
"@types/react-test-renderer": "19.1.0",
"@types/supercluster": "7.1.3",
"axios-mock-adapter": "2.1.0",
"babel-plugin-module-resolver": "^5.0.2",
"eslint": "9.24.0",
"eslint-plugin-react": "7.37.5",
"globals": "16.0.0",
"jest": "29.7.0",
"jest-transform-stub": "2.0.0",
"patch-package": "8.0.0",
"prettier": "3.5.3",
"react-native-svg-transformer": "1.5.0",
"react-shallow-renderer": "16.15.0",
"react-test-renderer": "19.1.0",
"ts-jest": "29.3.2",
"typescript": "5.8.3",
"typescript-eslint": "8.31.0"
},
"engines": {
"node": ">=18"
},
"packageManager": "[email protected]"
}
react-native info output:
System:
OS: macOS 15.4.1
CPU: (14) arm64 Apple M3 Max
Memory: 597.59 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 23.11.0
path: /opt/homebrew/bin/node
Yarn:
version: 4.5.3
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: /opt/homebrew/bin/npm
Watchman:
version: 2025.02.17.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /Users/ertucaglar/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
Android SDK: Not Found
IDEs:
Android Studio: 2024.3 AI-243.24978.46.2431.13208083
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 22.0.2
path: /usr/bin/javac
Ruby:
version: 3.2.3
path: /Users/ertucaglar/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 16.0.2
wanted: 16.0.2
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.79.1
wanted: 0.79.1
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
-
Platform that you're experiencing the issue on:
- [X] iOS
- [ ] Android
- [X] iOS but have not tested behavior on Android
- [ ] Android but have not tested behavior on iOS
- [ ] Both
I did some research, react-native and metro do not support some node features in their new versions, I think this is the problem, but I could not find a method that could work properly.
I am trying
yarn add 'react-native-quick-crypto'
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['module-resolver', {
alias: {
'crypto': 'react-native-quick-crypto',
},
}],
],
};
It thinks the node 'url' is included, and does not pick browser for react-native. Unsure why.
ok.... No idea why it does not auto pick browser....
But if you replace /node_modules/stream-chat/node_modules/axios/package.json
with (top of the file).... replace these lines:
"exports": {
".": {
"types": {
"require": "./index.d.cts",
"default": "./index.d.ts"
},
"browser": {
"require": "./dist/browser/axios.cjs",
"default": "./dist/esm/axios.js"
},
"default": {
"require": "./dist/browser/axios.cjs",
"default": "./dist/esm/axios.js"
}
},
The Axios picks the browser, since I changed it all to browser.
diff --git a/node_modules/stream-chat/node_modules/axios/package.json b/node_modules/stream-chat/node_modules/axios/package.json
index 03af2ac..74bc9eb 100644
--- a/node_modules/stream-chat/node_modules/axios/package.json
+++ b/node_modules/stream-chat/node_modules/axios/package.json
@@ -11,11 +11,11 @@
},
"browser": {
"require": "./dist/browser/axios.cjs",
- "default": "./index.js"
+ "default": "./dist/esm/axios.js"
},
"default": {
- "require": "./dist/node/axios.cjs",
- "default": "./index.js"
+ "require": "./dist/browser/axios.cjs",
+ "default": "./dist/esm/axios.js"
}
},
"./lib/adapters/http.js": "./lib/adapters/http.js",
diff --git a/node_modules/stream-chat/node_modules/axios/package.json b/node_modules/stream-chat/node_modules/axios/package.json index 03af2ac..74bc9eb 100644 --- a/node_modules/stream-chat/node_modules/axios/package.json +++ b/node_modules/stream-chat/node_modules/axios/package.json @@ -11,11 +11,11 @@ }, "browser": { "require": "./dist/browser/axios.cjs", - "default": "./index.js" + "default": "./dist/esm/axios.js" }, "default": { - "require": "./dist/node/axios.cjs", - "default": "./index.js" + "require": "./dist/browser/axios.cjs", + "default": "./dist/esm/axios.js" } }, "./lib/adapters/http.js": "./lib/adapters/http.js",
Thanks your helps, today I will give information about this after my experience.
By the way, maybe it will help us. Similar problems occur in another package I use after the upgrade. I use jotai, and when I make the same changes regarding esm in the package.json file on the jotai side, it starts working.
https://github.com/pmndrs/jotai/discussions/2486
diff --git a/node_modules/stream-chat/node_modules/axios/package.json b/node_modules/stream-chat/node_modules/axios/package.json index 03af2ac..74bc9eb 100644 --- a/node_modules/stream-chat/node_modules/axios/package.json +++ b/node_modules/stream-chat/node_modules/axios/package.json @@ -11,11 +11,11 @@ }, "browser": { "require": "./dist/browser/axios.cjs", - "default": "./index.js" + "default": "./dist/esm/axios.js" }, "default": { - "require": "./dist/node/axios.cjs", - "default": "./index.js" + "require": "./dist/browser/axios.cjs", + "default": "./dist/esm/axios.js" } }, "./lib/adapters/http.js": "./lib/adapters/http.js",
When I apply this it works fine @billnbell3
OK you can easily add the react-native export for long term fix for Axios.
"react-native": {
"require": "./dist/browser/axios.cjs",
"default": "./dist/esm/axios.js"
},
Hey, is this still an issue, or has it been fixed? We have not been able to reproduce it after recent upgrades on our sample apps with versions 0.79 or higher.
Closing this issue due to long time of inactivity and inability to reproduce it. If its still the case, please let us know and we will be happy to look into it. Thanks 😄