@parcel/transformer-js构建失败求助：React Native语法解析错误

问题 #

执行Parcel 2构建命令 parcel build src/web/index.html，运行npm run build-dev时构建失败，报错信息如下：

错误1 #

➜  my-webapp git:(master) ✗ npm run build-dev

> webapp@0.0.1 build-dev
> parcel build src/web/index.html

🚨 Build failed.

@parcel/transformer-js: Expected ',', got '{'

  /Users/me/my-webapp/node_modules/react-native-inappbrowser-reborn/index.js:9:13
     8 | 
  >  9 | import type {
  >    |             ^
    10 |   BrowserResult,
    11 |   AuthSessionResult,

错误2 #

🚨 Build failed.

@parcel/transformer-js: Expected ',', got ':'

  /Users/me/my-webapp/node_modules/react-native/Libraries/Utilities/binaryToBase64.js:15:29
    14 | 
  > 15 | function binaryToBase64(data: ArrayBuffer | $ArrayBufferView): string {
  >    |                             ^
  16 |   if (data instanceof ArrayBuffer) {
  17 |     // $FlowFixMe[reassign-const]

当前使用的Parcel 2配置文件（.parcelrc）内容：

{
  "extends": [
    "@parcel/config-default"
  ],
  "reporters": [
    "...",
    "parcel-reporter-static-files-copy"
  ],
  "transformers": {
    "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [
      "@parcel/transformer-babel",
      "@parcel/transformer-js"
    ]
  }
}

解决方案 #

方案1：让Parcel处理Flow类型语法 #

这些错误是因为react-native相关包使用了Flow类型注解，默认的Parcel JS转换器无法识别这类语法。需要添加Flow转换器并调整转换顺序：

1. 安装Flow转换器依赖：

npm install @parcel/transformer-flow --save-dev

2. 修改.parcelrc配置，让Flow转换器优先处理JS文件：

{
  "extends": [
    "@parcel/config-default"
  ],
  "reporters": [
    "...",
    "parcel-reporter-static-files-copy"
  ],
  "transformers": {
    "*.{js,mjs,jsm,jsx,es6,cjs}": [
      "@parcel/transformer-flow",
      "@parcel/transformer-babel",
      "@parcel/transformer-js"
    ],
    "*.{ts,tsx}": [
      "@parcel/transformer-babel",
      "@parcel/transformer-js"
    ]
  }
}

方案2：移除不必要的react-native依赖 #

如果你的Web项目根本不需要react-native相关包，直接卸载即可彻底解决问题：

npm uninstall react-native react-native-inappbrowser-reborn

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