CODEWITHSUNDEEP
npmwebpackvue.jsmapbox-gl-jsvue-cli
thibautg
thibautg

Reputation: 2052

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

I'm developing a vue-cli 2.9.3 app with the webpack template. I have a component which uses MapboxGL, imported with import mapboxgl from 'mapbox-gl;'.

Everything works fine in dev using npm run dev.

I can build the project without issue with npm run build. However, I get the following error on the console when navigating to the component using MapboxGL:

ReferenceError: e is not defined

The DevTools from Firefox or Chrome are unable to make the link to the sourcemap (.js.map) files, so the error message is not very helpful.

I was able to make the bundle work by using devtool: eval-source-map instead of devtool: source-map in ./config/index.js, but the bundle size becomes > 8Mb which is not acceptable and it is not recommended in production.

I have also tried without sourcemaps but I got the same cryptic error.

How can I debug this error in the packaged bundle? I would like to at least be able to see where the error comes from.

Upvotes: 4

Views: 1090

Answers (1)

thibautg
thibautg

Reputation: 2052

It seems that it is a known bug with MapboxGL and Webpack.

It can be solved by adding the following in ./build/webpack.prod.conf.js:

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

Upvotes: 4

Related Questions