0.72.0 does not work with axios

[ethanneff]

Description'

version 0.72.0 does not work with axios. this was working fine in 0.71.11

 BUNDLE  ./index.js 

error: Error: Unable to resolve module url from /node_modules/axios/dist/node/axios.cjs: url could not be found within the project or in these directories:
  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');

React Native Version

0.72.0

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 13.4
  CPU: (10) arm64 Apple M1 Max
  Memory: 559.08 MB / 64.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.14.2
    path: ~/.nvm/versions/node/v18.14.2/bin/node
  Yarn:
    version: 1.22.19
    path: /opt/homebrew/bin/yarn
  npm:
    version: 9.6.7
    path: ~/Documents/apps/playground-react-native/node_modules/.bin/npm
  Watchman:
    version: 2023.05.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.12.1
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 22.4
      - iOS 16.4
      - macOS 13.3
      - tvOS 16.4
      - watchOS 9.4
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "33"
    Build Tools:
      - 29.0.2
      - 29.0.3
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
    System Images:
      - android-30 | Google APIs ARM 64 v8a
      - android-33 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2022.2 AI-222.4459.24.2221.9862592
  Xcode:
    version: 14.3.1/14E300c
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.17
    path: /usr/bin/javac
  Ruby:
    version: 3.2.2
    path: /Users/ethan.neff/.rvm/rubies/ruby-3.2.2/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Steps to reproduce

npx react-native@latest init AwesomeProject
npm install axios
npm run start

Snack, code example, screenshot, or link to a repository

n/a

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[blakef]

I can't reproduce this (please feel free to reopen with a reproducible example using Expo snack or something similar), here is how I tried to. I followed you steps, added this to the App.tsx:

import axios from 'axios';
...
  const [text, setText] = useState('loading');
  useEffect(() => {
    axios
      .get('https://reactnative.dev')
      .then(resp => {
          console.log(resp);
          setText(resp.data);
          },
          err => console.error(err)
          );
  }, []);
...
<Text>{text}</Text>

❯ grep react-native package.json
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "react-native": "0.72.0"
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@tsconfig/react-native": "^3.0.0",
    "metro-react-native-babel-preset": "0.76.5",

❯ cat metro.config.js
const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

[johnf]

axios will fail if you enable unstable_enablePackageExports: true, in the metro config as it will use the node import instead of the browser import

[blakef]

Thanks @johnf that's a good spot. If you find yourself in this pickle, we currently don't support per package condition name resolution. We can only do this globally, which could end up creating more problems for you:

const config = {
  resolver: {
    unstable_enablePackageExports: true,
    unstable_conditionNames: ['browser', 'require', 'react-native'],
  },
};

Options going forward:

1. Someone submits a PR to Axios -> @huntie do you want to put up a PR?
2. You can use the hack above although YMMV
3. We add an escape hatch for _per package conditionName overrides.

[kyranjamie]

Fixed by resolving this way

config.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === 'axios') {
    return context.resolveRequest(context, moduleName, platform);
  }