Metro Cannot resolve url issue in Nx mono repo with expo app

Question

I am getting an error from metro when trying to wrap my application in an AxiosProvider from a custom context.

I really don't know why, because I kept the default Nx configuration but I have a weird metro error about url not found.

I don't know if I am missing something but thank your for your help 🙂

Here is the error I am getting :

Metro has encountered an error: cannot resolve url: [...]/node_modules/@nx/expo/plugins/metro-resolver.js (30:15)
    return resolvePath;
  }
  throw new Error(`Cannot resolve ${chalk.bold(realModuleName)}`);
  };
}

Nothing fancy concerning the configuration, I have just created my app with npx create-nx-workspace@latest <workspace name> and removed the Nx boilerplate to replace it with a simple <Home /> component displaying some raw form fields.

Add that point, I am excepting to be able to display my component and being able to call my context using useContext(AxiosContext)hook.

I have a simple App.tsx like below :

/* eslint-disable jsx-a11y/accessible-emoji */
import React from 'react';

import {
  SafeAreaProvider,
} from 'react-native-safe-area-context';
import { Home } from '../modules/Home';
import { AxiosProvider } from '../contexts/AxiosContext';

export const App = () => {
  return (
    <SafeAreaProvider>
      <AxiosProvider>
        <Home />
      </AxiosProvider>
    </SafeAreaProvider>
  );
};

export default App;

my Axios prodiver is as follow :

import React, { createContext } from 'react';
import axios, {AxiosInstance} from 'axios';

interface AxiosContextInterface {
  authAxios: AxiosInstance;
  publicAxios: AxiosInstance;
}

const axiosContextDefaults: AxiosContextInterface = {
  authAxios: axios.create({
    baseURL: 'http://localhost:8081',
  }),
  publicAxios: axios.create({
    baseURL: 'http://localhost:8081',
  }),
};

const AxiosContext = createContext<AxiosContextInterface>(axiosContextDefaults);
const {Provider} = AxiosContext;
const AxiosProvider = ({children}:{children: JSX.Element | JSX.Element[]}) => {
  const authAxios = axiosContextDefaults.authAxios;
  const publicAxios = axiosContextDefaults.publicAxios

  return (
    <Provider value={{authAxios, publicAxios}}>
      {children}
    </Provider>
  );
};

export {AxiosProvider}

Answer 1

So, @OwenRivera answer worked perfectly fine for me !

I added the following line to my metro.config.js resolver (as the other one was already here) :

unstable_conditionNames: ['browser', 'require', 'react-native'],

resolver: {
  ...
  unstable_conditionNames: ['browser', 'require', 'react-native'],
}

Owen Rivera original answer