使用Expo集成MapBoxGL在Web环境运行失败问题排查

你的问题源于两个核心点：Web端依赖缺失，以及Expo Web默认Webpack配置未处理第三方库的TypeScript代码。以下是具体解决步骤：

1. 安装Web端必需依赖 #

@rnmapbox/maps的Web实现依赖mapbox-gl，需手动安装：

npm install mapbox-gl
# TypeScript项目额外安装类型定义
npm install @types/mapbox-gl --save-dev

2. 修改Expo Web的Webpack配置 #

Expo Web默认不会转译node_modules中的TypeScript文件，但@rnmapbox/maps的Web代码基于TS/TSX编写，需要配置Webpack让它处理这个库：

在项目根目录创建webpack.config.js文件，写入以下内容：

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  
  // 配置Webpack转译@rnmapbox/maps包内的TS/TSX文件
  config.module.rules.forEach(rule => {
    if (rule.oneOf) {
      rule.oneOf.unshift({
        test: /\.(js|jsx|ts|tsx)$/,
        include: /node_modules\/@rnmapbox\/maps/,
        use: ['babel-loader'],
      });
    }
  });

  return config;
};

3. 验证启动 #

重新启动Web端服务：

expo start --web

补充说明 #

• iOS端正常是因为@rnmapbox/maps在iOS上使用原生Mapbox SDK，无需依赖Web端的mapbox-gl包
• 如果启动后地图样式异常，可在项目入口文件（如App.tsx/jsx）中导入mapbox-gl的样式文件：

import 'mapbox-gl/dist/mapbox-gl.css';

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