Axios version 1.5.1 is not working properly for nxworkspace and react native new version (0.72.4)
I am creating a react native application inside the nxworskpace while trying to workaround with axios inside the application I have been caught with the error I have mentioned below in an imageenter image description here. If I downgrade the version of axios to 0.27.2 it is working properly but it is not working properly for axios version 1.5.1 . Any specific reasons for this issue or am I missing to configure something . Any help will be appreciated , thanks in advance. I have mentioned my package.json code below.
"name": "@sampleapp/source",
"version": "0.0.0",
"license": "MIT",
"scripts": {},
"private": true,
"dependencies": {
"@react-native-async-storage/async-storage": "^1.19.2",
"@react-native-community/netinfo": "^9.4.1",
"@react-navigation/native": "^6.1.7",
"@react-navigation/stack": "^6.3.17",
"axios": "^1.5.1",
"formik": "^2.4.3",
"promise": "^8.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.3",
"react-native-base64": "^0.2.1",
"react-native-crypto-js": "^1.0.0",
"react-native-elements": "^3.4.3",
"react-native-encrypted-storage": "^4.0.3",
"react-native-popover-view": "^5.1.2",
"react-native-safe-area-context": "^4.7.1",
"react-native-screens": "^3.24.0",
"react-native-toast-message": "^2.1.6",
"react-native-vector-icons": "^10.0.0",
"tslib": "^2.3.0",
"yup": "^1.2.0"
},
"devDependencies": {
"@babel/preset-react": "^7.14.5",
"@nx/detox": "16.6.0",
"@nx/eslint-plugin": "16.6.0",
"@nx/jest": "16.6.0",
"@nx/js": "16.6.0",
"@nx/linter": "16.6.0",
"@nx/react-native": "16.6.0",
"@nx/workspace": "16.6.0",
"@react-native-community/cli": "11.3.5",
"@react-native-community/cli-platform-android": "11.3.5",
"@react-native-community/cli-platform-ios": "11.3.5",
"@react-native/metro-config": "^0.72.9",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/jest-native": "5.4.2",
"@testing-library/react-native": "12.1.2",
"@types/jest": "^29.4.0",
"@types/node": "18.14.4",
"@types/react": "18.0.28",
"@types/react-native": "0.72.2",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.1",
"babel-jest": "^29.4.1",
"detox": "^20.11.1",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-import": "2.27.5",
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.32.2",
"eslint-plugin-react-hooks": "4.6.0",
"jest": "^29.4.1",
"jest-circus": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"jest-react-native": "18.0.0",
"metro": "0.76.7",
"metro-babel-register": "0.76.7",
"metro-config": "0.76.7",
"metro-react-native-babel-preset": "0.76.7",
"metro-react-native-babel-transformer": "0.76.7",
"metro-resolver": "0.76.7",
"nx": "16.6.0",
"nx-cloud": "latest",
"prettier": "^2.6.2",
"react-native-svg": "13.9.0",
"react-native-svg-transformer": "1.0.0",
"react-test-renderer": "18.2.0",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
"typescript": "~5.1.3"
},
"nx": {
"targets": {}
}
}
Try adding this to the metro.config.js
resolver: {
unstable_enablePackageExports: true,
unstable_conditionNames: ['browser', 'require', 'react-native'],
},