React Native集成NativeBase遇模块解析错误求助

云原生阿岚

2026-8-8

解决React Native Reanimated Web打包语法错误

问题分析

错误提示Module parse failed: Unexpected token (5:9)指向react-native-reanimated/lib/index.web.js中的export * as default from "./Animated";，这是因为该语法属于ES2022特性，当前Babel配置未对react-native-reanimated包进行转译，导致Webpack无法解析。

解决方案

方案1：修改Babel配置，转译react-native-reanimated

更新你的babel.config.js，添加对react-native-reanimated的转译规则：

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-reanimated/plugin',
      "nativewind/babel",
    ],
    // 让Babel转译react-native-reanimated包
    overrides: [
      {
        test: /node_modules\/react-native-reanimated/,
        presets: [
          ['babel-preset-expo', { jsxRuntime: 'automatic' }],
        ],
      },
    ],
  };
};

方案2：升级依赖版本

确保@babel/core和babel-preset-expo版本匹配，Expo 47建议使用@babel/core@^7.19.0及以上版本：

执行升级命令：

npm install @babel/core@^7.19.0 --save-dev

清除缓存并重启项目：

npx expo start --web --clear

方案3：自定义Expo Web的Webpack配置

如果上述方案无效，可自定义Webpack配置来处理该语法：

生成Webpack配置文件：

npx expo customize:web

在生成的webpack.config.js中添加规则：

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  // 添加规则处理react-native-reanimated
  config.module.rules.push({
    test: /\.js$/,
    include: /node_modules\/react-native-reanimated/,
    use: ['babel-loader'],
  });

  return config;
};