Mapbox GL this.map.on('load') event works locally but not when i deploy to vercel

user_16400435 0
Viewed 459

I am making an interactive map with mapbox and nuxt that sets the visibility of certain layers when the map loads. I also set up a queryRenderedFeatures function using this.map.on('mousemove'), like this:

export default {
  props: {
    map: {
      type: Object,
      required: true
    }
  },
  data: () => ({
    layerIds: ['Zip Code', 'Network'],
    zone: 'Zip Code'
  }),

  mounted () {
    this.map.on('load', () => { this.map.setLayoutProperty(this.layerIds[0], 'visibility', 'visible') })
    this.map.on('load', () => { this.map.setLayoutProperty(this.layerIds[1], 'visibility', 'none') })
    this.map.on('mousemove', (e) => {
      if( this.zone == 'Zip Code'){
        const features = this.map.queryRenderedFeatures(e.point)
...

Right now this is all being called in the mounted hook of a child of my map component and everything works as it should when i deploy to a local server. However, when I deploy to vercel, the map displays both layers on load, instead of just the first one, and returns a console error:

TypeError: this.map.on is not a function
    at c.mounted (98d0728.js:1)
    at ii (b366f77.js:2)
    at vn (b366f77.js:2)
    at Object.insert (b366f77.js:2)
    at $ (b366f77.js:2)
    at zn.__patch__ (b366f77.js:2)
    at zn.t._update (b366f77.js:2)
    at zn.o (b366f77.js:2)
    at Tn.get (b366f77.js:2)
    at new Tn (b366f77.js:2)
ai @ b366f77.js:2
manifest.js:1 Failed to load resource: the server responded with a status of 404 ()

I have found some threads that suggest mapbox is not compatible with server side rendering but I'm not confident thats the issue or even true at this point. either way, my attempts to add the target: 'static' line to my nuxt.config.js and refactor the mapbox gl import as a const in mounted have been unsuccessful so far. Anyone know what could be causing this error?

vercel mapbox-gl-js nuxt.js server-side-rendering vue.js
1 Answers

I was able to remove these errors by consolidating my nested UI component and its parent mapbox component, and rendering the app according to Nuxt's "full static" guide. I'm sure there are many different ways to solve this, some of which might allow me to retain server side rendering, and I would like to explore others like the use of Nuxt client side plugins for this purpose, but this solution works for me because server side rendering was a little overkill here anyway and static rendering is faster too.

user_164004350
Related