ExpoGo部署iOS应用遇`@babel/plugin-proposal-export-namespace-from`错误

问题详情 #

通过ExpoGo将应用部署到iOS设备时触发报错，提示Export namespace should be first transformed by @babel/plugin-proposal-export-namespace-from。项目未直接引入react-native-reanimated，但尝试过相关解决方案后问题仍未解决。

错误日志 #

iOS Bundling failed 2981ms
node_modules\react-native-reanimated\src\index.ts: C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\react-native-reanimated\src\index.ts: Export namespace should 
be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
SyntaxError: C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\react-native-reanimated\src\index.ts: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.
  5 | export * from './reanimated1';
  6 | export * from './reanimated2';
> 7 | export * as default from './Animated';
    |        ^^^^^^^^^^^^
  8 |
    at File.buildCodeFrameError (C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\core\lib\transformation\file\file.js:249:12)
    at NodePath.buildCodeFrameError (C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\traverse\lib\path\index.js:145:21)
    at assertExportSpecifier (C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:112:16)
    at C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:202:9
    at Array.forEach (<anonymous>)
    at C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:201:31
    at Array.forEach (<anonymous>)
    at getModuleMetadata (C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:149:27)
    at normalizeModuleAndLoadMetadata (C:\Users\arthu\development\pathRise\reactNativeStephenGrider\blog\node_modules\@babel\helper-module-transforms\lib\normalize-and-load-metadata.js:58:7)  

项目配置文件 #

package.json #

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "expo": "^44.0.0",
    "expo-status-bar": "~1.2.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1",
    "react-navigation": "^4.4.4",
    "react-navigation-stack": "^2.10.4"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

babel.config.js #

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

解决方案建议 #

• 安装缺失的Babel插件
  执行命令安装@babel/plugin-proposal-export-namespace-from：

  npm install --save-dev @babel/plugin-proposal-export-namespace-from
  

• 调整Babel配置顺序
  修改babel.config.js，将新安装的插件放在react-native-reanimated/plugin之前：

  module.exports = function (api) {
    api.cache(true);
    return {
      presets: ["babel-preset-expo"],
      plugins: [
        "@babel/plugin-proposal-export-namespace-from",
        "react-native-reanimated/plugin"
      ],
    };
  };
  

• 清理缓存并重启服务
  执行命令清理Expo缓存，然后重启服务：

  expo r -c
  

• 适配依赖版本
  Expo 44与react-native-reanimated存在版本兼容性问题，可安装适配版本：

  npm install react-native-reanimated@~2.3.1
  

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