MapboxGL with Webpack: "ReferenceError: e is not defined" (in vue-cli app)

Question

我正在使用 webpack 模板开发 vue-cli 2.9.3 应用程序。我有一个使用 MapboxGL 的组件，用 import mapboxgl from 'mapbox-gl;'.

导入

使用 npm run dev 在开发中一切正常。

我可以毫无问题地构建项目 npm run build。但是，当使用 MapboxGL 导航到组件时，我在控制台上收到以下错误：

ReferenceError: e is not defined

Firefox 或 Chrome 的 DevTools 无法将 link 生成到 sourcemap (.js.map) 文件，因此错误消息不是很有帮助。

我能够通过在 ./config/index.js 中使用 devtool: eval-source-map 而不是 devtool: source-map 来使捆绑工作，但捆绑大小变为 > 8Mb，这是不可接受的并且是 not recommended in production.

我也尝试过不使用 sourcemaps，但我遇到了同样的神秘错误。

如何调试打包包中的这个错误？我希望至少能够看到错误的来源。

Answer 1

好像是known bug与MapboxGL和Webpack的结合。

在./build/webpack.prod.conf.js中加入以下内容即可解决：

module: {
     ...
     noParse: /(mapbox-gl)\.js$/,
     ...
}

npm