React Native引入SearchBar时出现Can't resolve 'react'模块找不到报错

React Native 项目中添加@rneui/themed的SearchBar组件导入语句后，项目运行直接失败，抛出Module not found: Can't resolve 'react'报错，同时伴随多个react、react-native相关模块无法解析的错误。删除node_modules目录与package-lock.json后重新执行npm install，问题仍存在。

package.json 配置 #

{
  "name": "gympedia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@rneui/base": "^4.0.0-rc.5",
    "@rneui/themed": "^4.0.0-rc.5",
    "expo": "~45.0.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "react": "^17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "^0.17.7"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Header 组件代码 #

import { View, Text , Image, StyleSheet, TouchableOpacity } from 'react-native'
import React from 'react'
import { SearchBar } from "@rneui/themed";


const Header = () => {
  return (
    <View style={styles.container}>
            <TouchableOpacity>
                <Image style={styles.logo} source={require('../../assets/muscle-icon.png')} />
            </TouchableOpacity>
        
    
        <View style={styles.iconContainer}>
            <TouchableOpacity>
                <Image style={styles.icons} source={require('../../assets/search-icon.png')} />
            </TouchableOpacity>
            <TouchableOpacity>
                <Image style={styles.icons} source={require('../../assets/bookmark-icon.png')}/>
            </TouchableOpacity>
        </View>
    </View>
  )
}

报错片段 #

Module not found: Can't resolve 'react'
> 1 | import { useMemo } from 'react';
  2 | import { StyleSheet } from 'react-native';
  3 | export const makeStyles = (styles) => (props) => {
  4 |     return useMemo(() => {
../node_modules/@rneui/themed/dist/config/makeStyles.js:1
Module not found: Can't resolve 'react'
> 1 | import { useMemo } from 'react';
  2 | import { StyleSheet } from 'react-native';
  3 | import { useTheme } from './ThemeProvider';
  4 | export const makeStyles = (styles) => (props = {}) => {
../node_modules/@rneui/base/dist/helpers/index.js:1
Module not found: Can't resolve 'react-native'
> 1 | import { Platform, Dimensions } from 'react-native';
  2 | import color from 'color';
  3 | import renderNode from './renderNode';
  4 | import getIconType, { registerCustomIconType } from './getIconType';
../node_modules/@rneui/base/dist/helpers/colors.js:1
Module not found: Can't resolve 'react-native'
> 1 | import { StyleSheet } from 'react-native';
  2 | export const lightColors = {
  3 |     primary: '#2089dc',
  4 |     secondary: '#03dac4',

1. 使用的@rneui/themed和@rneui/base为rc.5预览版，和Expo 45的依赖解析逻辑存在兼容问题
2. 核心依赖版本使用了^范围匹配，导致npm可能安装多版本react/react-native实例，嵌套依赖无法找到正确的模块路径
3. 缺少RNE组件库必须的peer依赖，web端打包时未做路径别名映射，导致模块解析失败

• 卸载现有版本不兼容的RNE相关包，执行命令：
  npm uninstall @rneui/base @rneui/themed
• 修改package.json中核心依赖的版本号，去掉^前缀固定版本，避免多版本实例问题：

"react": "17.0.2",
"react-dom": "17.0.2",
"react-native-web": "0.17.7"

• 安装兼容Expo 45的RNE版本，以及组件库必须的peer依赖：
  npm install @rneui/base@4.0.0-rc.7 @rneui/themed@4.0.0-rc.7 react-native-safe-area-context react-native-svg
• 若需要运行web端，执行expo customize:web生成根目录的webpack.config.js文件，添加路径别名配置强制指定核心依赖的解析位置，配置内容如下：

const path = require('path');
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.resolve.alias = {
    ...config.resolve.alias,
    'react': path.resolve(__dirname, 'node_modules/react'),
    'react-native': path.resolve(__dirname, 'node_modules/react-native-web'),
    'react-native-safe-area-context': path.resolve(__dirname, 'node_modules/react-native-safe-area-context'),
  };
  return config;
};

• 清理缓存重启服务，依次执行以下命令：

rm -rf node_modules package-lock.json .expo
npm install
expo start -c

注意：安装完react-native-safe-area-context后，iOS端需要执行npx pod-install完成原生依赖链接再运行。

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