react-native-web编译失败：react-navigation v6中BackHandler模块未找到

问题背景 #

使用React Native CLI创建的0.70.2版本项目，因React版本冲突被迫安装canary版react-native-web，编译时出现BackHandler模块未找到的错误——该模块由react-navigation v6从react-native中导入。

解决方案 #

1. 自定义BackHandler的Web端实现并配置webpack别名 #

Web平台无原生硬件后退按钮，需手动适配BackHandler：

• 在项目中创建src/BackHandler.web.js文件：

export const BackHandler = {
  addEventListener: (event, handler) => {
    if (event === 'hardwareBackPress') {
      const handlePopState = () => {
        const shouldPreventBack = handler();
        if (shouldPreventBack) {
          // 阻止浏览器默认后退行为
          window.history.pushState(null, null, window.location.pathname);
        }
      };
      window.addEventListener('popstate', handlePopState);
      return () => window.removeEventListener('popstate', handlePopState);
    }
    return () => {};
  },
  removeEventListener: () => {},
  exitApp: () => {}
};

export default BackHandler;

• 修改webpack配置的resolve.alias，添加BackHandler的映射：

resolve: {
  extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
  alias: {
    'react-native$': 'react-native-web',
    'react-native/Libraries/Utilities/BackHandler$': path.resolve(__dirname, 'src/BackHandler.web.js')
  },
},

2. 让babel编译react-navigation模块 #

取消webpack配置中compileNodeModules里@react-navigation的注释：

const compileNodeModules = [
    'react-native-gesture-handler',
    '@react-navigation', // 取消此行注释
].map(moduleName => path.resolve(appDirectory, `node_modules/${moduleName}`));

3. 确认babel插件配置有效性 #

保证babel-loader的plugins中包含react-native-web，确保模块映射逻辑生效：

use: {
  loader: 'babel-loader',
  options: {
      cacheDirectory: true,
      presets,
      plugins: ['react-native-web'], // 确认该插件存在
  },
},

原理说明 #

react-native-web并非完全兼容所有React Native原生模块，BackHandler这类依赖原生硬件的模块需要手动提供Web端适配。通过webpack别名将React Native的BackHandler导入指向自定义实现，同时确保react-navigation模块被正确编译，即可解决编译错误。

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