Vue-mapbox-gl and Nuxt?
evanzummeren opened this issue · comments
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?
@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';
@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
.
@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
Still not working with SSR: Reference error: self is not defined
. mapbox-gl doesn't work on node
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
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
Mapbox GL is not compatible with server side rendering. Please see at @easherma comment for a great solution!