ReferenceError: mapboxgl is not defined at VueComponent.mapInit

[jparish3]

I have tried the fixes in the closed issue but cannot get results. ReferenceError: mapboxgl is not defined #1

[Mamunur Rashid Rimon]

I am having the same issue

[Brian Freed]

Me too, but I figured it out.
In the Readme, right above "Usage" - need to do the shimming thing to add a global "mapboxgl".

In my case, I'm using Quasar, so I don't have direct access to webpack.
To use with Quasar:
In quasar.conf.js, at the top, add the line:
const webpack = require('webpack');
Then in the "build" section:
extendWebpack(cfg) { cfg.plugins.push( new webpack.ProvidePlugin({ mapboxgl: "mapbox-gl" }) ); }
Now it works

[Vinayak Kulkarni]

• Solved here in the docs

[Mauricio Giraldo]

@vinayakkulkarni this shimming is not working for me. if i leave that as is, any call within a component to mapboxgl like new mapboxgl.Popup() produces the self is not defined error when reloading the page. i've been forced to add a const mapboxgl = require('mapbox-gl/dist/mapbox-gl') before those calls to have it work. any idea what could be going on?

this is my nuxt config:
https://github.com/mgiraldo/livingarchive/blob/44778b321b27777c6f3043cffdbdea8a0bafaeb3/nuxt.config.js

and a use case in a component (with the require):
https://github.com/mgiraldo/livingarchive/blob/44778b321b27777c6f3043cffdbdea8a0bafaeb3/components/ResultsMap.vue#L426-L438

and my plugin file:
https://github.com/mgiraldo/livingarchive/blob/44778b321b27777c6f3043cffdbdea8a0bafaeb3/plugins/vue-mapboxgl.js

this code works on the client and showing no error on reload. removing the require fails.