Rollup打包Lit Element项目引入mapbox-gl报Map导出错误如何解决

问题表现 #

在以Rollup为打包工具的Lit Element项目中引入mapbox-gl依赖时，控制台抛出如下错误：

Uncaught SyntaxError: The requested module './../../node_modules/mapbox-gl/dist/mapbox-gl.js' does not provide an export named 'Map' (at page-home.ts:3:9)

原有导入写法：

import {Map} from 'mapbox-gl';

结论 #

Rollup打包的Lit Element项目完全可以正常使用Mapbox GL，该报错本质是模块格式兼容问题，按下面的方法调整即可解决。

报错原因 #

mapbox-gl默认入口是UMD/CommonJS格式产物，没有提供原生ESM规范的具名导出，Rollup默认无法直接识别CommonJS模块内部的导出属性，因此具名导入Map时会提示找不到对应导出。

解决方法 #

• 方案1：改用默认导入（推荐，兼容性最好）
  先确保项目已经安装@rollup/plugin-commonjs插件用来处理CommonJS模块转ESM，如果未安装先执行安装命令：

  npm i @rollup/plugin-commonjs -D
  

  在Rollup配置的plugins数组中引入该插件。

  注意：@rollup/plugin-commonjs插件的注册顺序必须放在@rollup/plugin-node-resolve之后，否则会出现模块解析异常。

  之后修改导入代码为默认导入，从导入的默认对象上取用需要的API：

  import mapboxgl from 'mapbox-gl';
  
  // 初始化地图示例
  const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [-74.5, 40],
    zoom: 9
  })
  

• 方案2：配置CommonJS插件具名导出映射
  如果想保留原有import { Map }的具名导入写法，可以在@rollup/plugin-commonjs的配置项中手动指定mapbox-gl的导出映射：

  // rollup.config.js
  import commonjs from '@rollup/plugin-commonjs';
  
  export default {
    // 其余原有配置保持不变
    plugins: [
      // 其余原有插件（nodeResolve、typescript等）保持顺序不变
      commonjs({
        namedExports: {
          'mapbox-gl/dist/mapbox-gl.js': ['Map', 'Marker', 'Popup', 'GeolocateControl' /* 所有你需要用到的mapbox-gl导出API都可以列在这里 */]
        }
      })
    ]
  }
  

• 方案3：直接引入mapbox-gl的ESM构建产物
  2.x及以上版本的mapbox-gl自带ESM格式构建产物，可以直接指定ESM文件路径导入，无需额外调整Rollup配置即可使用具名导入：

  import { Map } from 'mapbox-gl/dist/mapbox-gl.esm.js';
  

  如果对应路径找不到文件，可以先去node_modules/mapbox-gl/dist目录下确认当前安装版本的ESM产物实际文件名。

内容的提问来源于stack exchange，提问作者Mohammad Mahdi Moodi