Nx Monorepo中Expo应用Metro无法解析URL问题求助

问题概述 #

使用npx create-nx-workspace@latest创建默认配置的工作区，移除Nx模板并替换为带表单的<Home/>组件后，用自定义AxiosProvider包裹应用时，Metro抛出来自@nx/expo/plugins/metro-resolver.js的“无法解析URL”错误，无法正常显示组件及通过useContext(AxiosContext)调用上下文。

错误信息 #

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)}`);
  };
}

相关代码 #

App.tsx #

/* 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;

AxiosContext.tsx #

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}

解决方案 #

1. 版本兼容性检查 #

确保@nx/expo与expo版本匹配，Nx对Expo版本有严格兼容要求。执行命令更新到兼容版本：

npm install @nx/expo@latest --save-dev

或使用yarn/pnpm对应命令：

yarn add @nx/expo@latest --dev
pnpm add @nx/expo@latest --save-dev

2. 修复Metro配置 #

在项目根目录的metro.config.js（或metro.config.ts）中调整Nx Metro配置，确保解析逻辑正确：

const { getDefaultConfig } = require('@expo/metro-config');
const { withNxMetro } = require('@nx/expo');

const config = getDefaultConfig(__dirname);

module.exports = withNxMetro(config, {
  projectRoot: __dirname,
  resolver: {
    ...config.resolver,
    sourceExts: [...config.resolver.sourceExts, 'ts', 'tsx'],
  },
});

3. 清理缓存与重新安装依赖 #

彻底清除Metro缓存及依赖文件，避免缓存导致的解析问题：

# 清除Metro缓存
npx expo start --clear

# 删除依赖文件并重新安装
rm -rf node_modules package-lock.json
npm install

4. 验证导入路径正确性 #

检查App.tsx中AxiosProvider的导入路径是否正确，确保文件目录结构与路径一致（Metro对文件名大小写敏感）。

5. 确认Axios安装 #

验证axios是否已正确安装到项目中：

npm list axios

若未安装，执行以下命令安装：

npm install axios

内容的提问来源于stack exchange，提问作者brpinto