Expo/React Native+Next.js集成react-native-elements遇Webpack解析错误

安全阿岳

2026-8-5

解决Expo + Next.js跨端项目中react-native-ratings的Webpack解析错误

核心问题分析

你遇到的Webpack解析错误，本质是react-native-ratings（react-native-elements的依赖模块）未被正确转译。虽然Next.js 13.1+内置了转译第三方包的能力，但仅添加react-native-elements到transpilePackages不足以覆盖其依赖的未预编译模块。

具体解决步骤

完善transpilePackages配置
把react-native-ratings及其他关联的RN依赖也加入转译列表，修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-native-elements', 'react-native-ratings', 'react-native-vector-icons'],
  reactStrictMode: true,
  // 保留你的Expo相关配置
};

module.exports = nextConfig;

注：react-native-vector-icons也是react-native-elements的常见依赖，一起加入能避免后续可能的同类错误。

清理缓存并重新构建
缓存可能导致旧配置未生效，执行以下命令重置环境：
```
yarn cache clean
rm -rf .next node_modules
yarn install
yarn dev
```

强制指定Babel转译规则（可选）
如果上述步骤仍无效，在next.config.js中扩展Webpack配置，强制用babel-preset-expo处理目标模块：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['react-native-elements', 'react-native-ratings'],
  webpack: (config) => {
    config.module.rules.push({
      test: /\.js$/,
      include: [
        path.resolve(__dirname, 'node_modules/react-native-ratings'),
        path.resolve(__dirname, 'node_modules/react-native-elements'),
      ],
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['babel-preset-expo'],
        },
      },
    });
    return config;
  },
};

module.exports = nextConfig;