使用babel-plugin-react-native-web打包RN组件到web端出现Image构造报错

该报错的核心是react-native到react-native-web的适配替换逻辑没有生效，打包产物中引入了原生React Native的运行时代码，而非web适配版本：

• 原生React Native内部的Image组件在web环境下直接调用了浏览器原生Image构造函数但未加new运算符，不符合Web DOM API调用规范，直接触发该报错。哪怕你当前编写的组件代码没有显式引入Image，React Native核心内部的依赖逻辑也会触发这个问题。
• 你仅安装了babel-plugin-react-native-web，但webpack的模块别名配置、babel配置未正确对齐适配要求，导致打包时没有把所有react-native的导入替换为react-native-web的适配实现。

1. 补充webpack模块别名配置 #

在你的webpack.config.js中新增resolve.alias配置，明确把react-native的导入指向react-native-web，同时补充web端优先的文件后缀识别规则：

module.exports = {
  // 保留你原有其他配置不变
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
    },
    extensions: ['.web.js', '.web.jsx', '.web.ts', '.web.tsx', '.js', '.jsx', '.ts', '.tsx']
  }
}

2. 校验babel配置 #

确认你的babel配置文件（.babelrc或babel.config.js）已经正确引入react-native-web插件，且webpack的babel-loader规则没有把react-native、react-native-web相关包加入排除列表，需要babel对这些包做转译适配：

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": ["react-native-web"]
}

3. 补全依赖 #

你给出的依赖列表中缺少核心适配包react-native-web，执行以下命令安装对应版本即可：

npm install react-native-web@^0.17.5
# 或使用yarn
yarn add react-native-web@^0.17.5

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