使用Expo实现图片选择功能启动时报webpack相关错误如何解决？

问题根因 #

1. 依赖混用：你同时安装了面向Web前端开发的react-scripts、react-dom等依赖，和Expo React Native开发的专属依赖，两套体系的构建配置存在冲突，直接触发webpack插件参数不兼容报错。
2. 启动命令错误：你使用的是React Web项目的node scripts/start.js启动脚本，不是Expo项目的标准启动命令，触发了错误的构建流程。

解决步骤 #

• 移除冲突的Web端依赖：

npm uninstall react-scripts react-dom react-native-web react-art react-router-dom

如果使用yarn作为包管理器，替换为：

yarn remove react-scripts react-dom react-native-web react-art react-router-dom

• 修改package.json中的scripts配置为Expo标准启动脚本：

"scripts": {
  "start": "expo start",
  "android": "expo start --android",
  "ios": "expo start --ios",
  "web": "expo start --web"
}

• 清理残留依赖并重新安装：

rm -rf node_modules package-lock.json yarn.lock
npm install

• 使用Expo标准命令启动项目：

npx expo start

代码补充提示 #

你现有的业务代码逻辑没有问题，不过新版expo-image-picker需要提前申请媒体库权限，避免iOS/Android端权限不足无法打开相册，可以补充权限校验逻辑：

import React, { useState } from 'react';
import { Button, Image, View, Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker'
import * as Permissions from 'expo-permissions';

export default function App() {
  const [image, setImage] = useState(null);

  const requestPermission = async () => {
    const { status } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY);
    if (status !== 'granted') {
      Alert.alert('提示', '需要授予媒体库访问权限才能选择图片');
      return false;
    }
    return true;
  }

  const pickImage = async () => {
    const hasPermission = await requestPermission();
    if (!hasPermission) return;
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing:true
    })

    if(!result.cancelled){
      setImage(result.uri)
    }
  }

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Click here to pick an image" onPress={pickImage} />
      {image && <Image source={{ uri:image }} style={{ width:200, height:200}}/>}
    </View>
  );
}

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