Vue-mapbox-gl and Nuxt?

[Erik van Zummeren]

I'm trying to get this wrapper to work with Nuxt.js. If I try to import mapbox-gl I get a Reference error: self is not defined, because Nuxt.js is trying to render it server-side (as described here: mapbox/mapbox-gl-js#4463). There they solved it by using require in a createMap method and by making a plugin so it doesn't get server side rendered. But none of these solutions seems to be working for this wrapper. Does anyone have any idea?

[Eric Sherman]

@evanzummeren I got this working just fine, but I ended up having to do it as a webpack plugin. In nuxt config:
At the top:

const webpack = require('webpack')

In the config:

  build: {
    plugins: [
      new webpack.ProvidePlugin({
        mapboxgl: 'mapbox-gl'
      })
    ],

and then in a page or component:

import Mapbox from 'mapbox-gl-vue';

[Chris]

@easherma did you add anything else to make sure Mapbox is only executed on the client side? Because with your approach I still get Reference error: self is not defined.

[Chieftl]

@easherma your method is working for me, thanks.

Here is commit of Mapbox adding in my repo (@ChristophAnastasiades please review):
Chieftl/wigle-map-viewer@ee15b07#diff-7d1641065fb3365f32d1446a034d5609

[Luis Hernández Castillo]

Still not working with SSR: Reference error: self is not defined . mapbox-gl doesn't work on node

[Jonas]

Has anything changed here?
I have installed the packages:
mapbox-gl-vue and mapbox-gl. I added this to my nuxt config:

// nuxt.config.js
// ... skipped parts

module.exports = {
// ... skipped parts

/*
  ** Plugins
  */
  plugins: [
    { src: '~/plugins/mapbox-gl-vue', ssr: false }
  ],

// ... skipped parts
/*
  ** Build configuration
  */
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        mapboxgl: 'mapbox-gl'
      })
    ],

   // adding vendor (deprecated anyway) did not help either:
   // vendor: ['mapbox-gl'],

    extend(config, { isDev, isClient }) {
      /*
      ** Run ESLINT on save
      */
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

// ... skipped parts

And I am using Mapbox as a plugin:

//  mapbox-gl-vue.js

import Vue from 'vue'
import Mapbox from 'mapbox-gl-vue'

Vue.component('mapbox', Mapbox)

Still I would get this error:

ReferenceError: self is not defined

Does anyone have a solution for this to work?
Thank you in advance.
cheers

[Jonas]

Oh damn. Sorry. As always shortly after requesting help one finds a solution:
I was still importing import mapboxgl from 'mapbox-gl' at the top of my component to log it.
But I guess this was not possible because of mapbox being not able to run on the server.
So I just had to delete that and use my plugin which already has set ssr: false.
(As also described here: mapbox/mapbox-gl-js#4463 (comment)).

I think my question is resolved for now. Thx anyway

[Pete Hegman]

Mapbox GL is not compatible with server side rendering. Please see at @easherma comment for a great solution!