Map not showing on release build

[woshikie]

As per title.
Tested on the following App.vue:

<template>
  <div id="app">
    <MglMap class="mglmap" container="map" :zoom="10.5" :access-token="accessToken" :map-style="mapStyle" :center="sgCenter">
      <MglGeolocateControl/>
      <MglNavigationControl/>
    </MglMap>
  </div>
</template>

<script>
import 'mapbox-gl/dist/mapbox-gl.css';
import 'v-mapbox/dist/v-mapbox.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import {MglMap, MglNavigationControl, MglGeolocateControl} from 'v-mapbox'
export default {
  name: 'App',
  components: {MglMap, MglNavigationControl, MglGeolocateControl},
  data(){
    return {
      accessToken: '<omitted>',
      mapStyle: 'mapbox://styles/mapbox/dark-v9',
      sgCenter: [103.82161, 1.35433],
    };
  }
}
</script>
<style scoped>
.mglmap {
  height: 100vh;
  position: absolute;
  z-index: 0;
}
</style>

map works on npm run serve, npm run build --mode development but not on npm run build

Edit: Changed test code

[vinayakkulkarni]

- import {MglMap, MglNavigationControl, MglGeolocateControl} from 'vue-mapbox'
+ import { MglMap, MglNavigationControl, MglGeolocateControl } from 'v-mapbox'

seems you're importing the wrong package

[woshikie]

Updated test code with suggestion. Still unable to see the map on release build

[vvavepacket]

@vinayakkulkarni I'm also facing the same issue. New release build. And map is not loading...

[vvavepacket]

@vinayakkulkarni
I'm seeing 100% width and height being occupied, but still map is blank. Do you have some samples where you tested this with latest build? I appreciate your help

[vinayakkulkarni]

@vvavepacket: can you reproduce this with a demo repo or codesandbox?

[woshikie]

@vinayakkulkarni here you go https://github.com/woshikie/mapbox-bug-demo

[vinayakkulkarni]

@woshikie & @vvavepacket: I've fixed some minor issues, released a new version & have done a demo on codesandbox.

[woshikie]

Thanks for the update @vinayakkulkarni

I have updated my repo with the latest package and this is the output from my npm run build.

dist.zip

You can see for yourself that the map is not showing. It is showing, however, on debug builds, which we can see on CodeSandbox or npn run serve

If you don't have a development web server to run the files, you can use python as a web server.
Assuming you are using python 3 and you extracted the zip file to your current working directory:
python -m http.server --directory dist
You should be able to reach your python web server on http://localhost:8000 (by default)

Edit: not opening a new issue as we can simply reopen this one