React Native Web+Webpack集成Firebase时遇require未定义错误求助

问题描述 #

使用Nx开发React Native Web项目，自定义Webpack配置原本运行正常，安装Firebase SDK并导入后出现以下错误：

Uncaught ReferenceError: require is not defined
    <anonymous> webpack://MY_PROJECT_NAME/source/./node_modules/@firebase/app/node_modules/idb/build/index.js?:2

导入方式：

import {} from 'firebase/analytics';

错误原因 #

错误根源在于idb（Firebase的依赖包）是CommonJS格式，但你的Webpack配置中，babel-loader排除了所有node_modules目录下的文件转译，导致idb模块中的require语法未被转换为浏览器兼容的代码，而浏览器环境本身不支持require。

解决步骤 #

1. 调整babel-loader的白名单规则 #

修改babelLoaderConfiguration中的exclude.not数组，将@firebase和idb加入白名单，让它们被babel转译：

const babelLoaderConfiguration = {
    test: /\.(tsx|jsx|ts|js|cjs)?$/,
    exclude: [
        {
            and: [
                path.resolve(appDirectory, '../node_modules'),
                path.resolve(appDirectory, 'ios'),
                path.resolve(appDirectory, 'android'),
            ],
            // 加入需要转译的Firebase相关依赖
            not: [
                path.resolve(appDirectory, '../node_modules/@firebase'),
                path.resolve(appDirectory, '../node_modules/idb'),
            ],
        },
    ],
    // ... 其他配置不变
};

2. 确认Babel配置包含必要预设 #

检查项目根目录的babel.config.js，确保包含@babel/preset-env，它会将CommonJS模块转换为浏览器兼容的ES模块语法：

module.exports = {
  presets: [
    '@babel/preset-env', // 确保存在这个预设
    '@babel/preset-react',
    '@babel/preset-typescript',
    'module:metro-react-native-babel-preset'
  ],
  // ... 其他插件
};

3. 可选：优化Webpack对CommonJS的处理 #

如果使用Webpack 5，可以添加resolve.mainFields配置，优先加载ES模块版本的依赖：

resolve: {
  // ... 现有配置
  mainFields: ['browser', 'module', 'main'],
},

验证修改 #

重新启动Webpack开发服务器，导入Firebase模块的代码应该能正常运行，不再出现require is not defined错误。

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