My Mapbox integration was working fine locally. But then when did a Webpack build and pushed the assets to my web server, there was a JavaScript console error
I was implementing Mapbox in an Angular 4 application and everything was going fine. I was working locally, but after getting some UI issues worked out, things seemed to be going very smoothly. But when I ran my build and then viewed the static assets remotely, I had this lovely little JavaScript error in my console: “Uncaught ReferenceError: t is not defined“.
Hmmmm. everything seemed just fine to me. I did some troubleshooting and the issue looked like it was being caused by Mapbox. How could this be? It was not a problem locally.
I found the answer here: Build fails when using mapbox-gl webpack 2 and UglifyJSPlugin #4359.
Credit really goes to zezhipeng – whose answer was spot-on. Seems that when Webpack parses the mapbox-gl module, things do not go too well. So I just needed to add this line to my Webpack config:
|
1 2 3 4 5 |
module: { ... noParse: /(mapbox-gl)\.js$/, ... } |
(the “…” is just whatever else you have in your module.exports.module object.)
And that was it, working again. Thanks zezhipeng!
