Require mapbox-gl in Nuxt.js project

[martinrisseeuw]

mapbox-gl-js version:

I dedicated a repository to this issue:
https://github.com/martinrisseeuw/vue-mapbox-gl-test

Steps to Trigger Behavior

1. npm install
2. npm run dev

Expected Behavior

Load the map correctly

Actual Behavior

In pages/index.vue I require the mapbox-gl library unfortunatly this crashes the application. When saving the project returns an error:

Vue.js error

ReferenceError: self is not defined
    at Object.194 (__vue_ssr_bundle__:3871:29)
    at s (__vue_ssr_bundle__:3474:602)
    at __vue_ssr_bundle__:3474:653
    at Object.192../window (__vue_ssr_bundle__:3867:25)
    at s (__vue_ssr_bundle__:3474:602)
    at __vue_ssr_bundle__:3474:653
    at Object.65.../package.json (__vue_ssr_bundle__:3612:26)
    at s (__vue_ssr_bundle__:3474:602)
    at e (__vue_ssr_bundle__:3474:773)
    at __vue_ssr_bundle__:3474:791

I'm not sure if it's a VUE.JS error or an error that is know to you when you require mapbox-gl (0.34.0).

[anandthakker]

@martinrisseeuw thanks for reporting this issue and for providing the test case.

I am not familiar with Nuxt.js, but from a quick look it appears that it's designed to do server-side rendering. When I look at the example in your test repo, it seems like the error message is already rendered into the HTML--not produced by a script running on the page / in the browser.

Is it possible that the Nuxt.js configuration here is causing mapbox-gl to be loaded server-side, in Node? If so, that is a very likely cause of the error: mapbox-gl-js is not designed to be run outside of a browser.

[martinrisseeuw]

It was indeed a problem of Mapbox trying to render on the server.

[amkite]

@martinrisseeuw: I bumped into the same problem, could you post an explanation of the solution you found?

Thanks in advance!

[martinrisseeuw]

@amkite Sure!

So, what I did was importing Mapbox at the wrong place. This made Nuxt trying to render it server side.

I created a gist for you to take a look at with the right and wrong example:
https://gist.github.com/martinrisseeuw/96a52024f1f6d9300d1ce3c807badca5

Hope it helped.

[amkite]

Yeah, it did help, thanks a lot @martinrisseeuw!

[andrewharvey]

Another approach which works and means you can still use import rather than require is to move your Mapbox code out from the page and into a component, and ensure you load that component with ssr: false in the plugins.

nuxt.config.js:

plugins: [
  { src: '~/plugins/map.js', ssr: false }
]

~/plugins/map.js:

import Vue from 'vue'
import Map from '@/components/Map.vue'

Object.keys(components).forEach(key => {
  Vue.component(key, components[key])
})

[ajhaupt7]

@martinrisseeuw @andrewharvey were you guys able to get this to work after running nuxt build? It's working properly with both of your techniques when running a dev server with nuxt, but after building the project the map doesn't load and it's throwing several errors (e is not defined). Attached console screenshots. Any ideas?

[andrewharvey]

@ajhaupt7 I've only ever used it with nuxt (dev server) and nuxt generate (static file hosting). Both worked fine once I did #4463 (comment), so I'm afraid I can't comment on nuxt build (ssr).

[martinrisseeuw]

@ajhaupt7 we had it running in dev and production. Here you can see how we added it: https://gist.github.com/martinrisseeuw/4943a180632e8ec95a45c5aec4061db8

[ajhaupt7]

Thanks guys -- looking like its an issue with webpack, specifically js uglification (#1649)

[jaskiratr]

@ajhaupt7 were you able to solve this issue? I'm facing the same Uncaught ReferenceError ... with Nuxt.

[jaskiratr]

Replying to my own question. Solution suggested by @martinrisseeuw worked. My Nuxt build settings needed some work.

// nuxt.config.js
 build: {
    vendor: ['axios', 'mapbox-gl', 'moment'],
    extend (config) {
      config.module.noParse = /(mapbox-gl)\.js$/
    }
}

[vjanssens]

@jaskiratr @martinrisseeuw thank you guys so much, helped me out 👍

[provish]

@martinrisseeuw Please print the output of console.log(JSON.stringify(config.module)),
Want to verify what you got in the noParse object..!

Because after adding noParse, my output includes "noParse":{},

thanks.

[mornir]

This is how I required mapbox-gl for a Nuxt project. Maybe it can be useful to somebody:

mounted() {
    const mapboxgl = require('mapbox-gl')
    const map = new mapboxgl.Map({
      accessToken: 'YOUR_TOKEN',
      container: 'map', // <div id="map"></div>
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-21.9270884, 64.1436456],
      zoom: 13
   })
}

For more info, check out: https://dev.to/mornir/how-to-add-mapbox-to-your-nuxt-static-site-b59

[ryanhamley]

The self is not defined error should be fixed by #9749 which was included in v1.11.0.