Mapbox-gl-js: Missing Mapbox GL JS CSS

Created on 1 Dec 2017 · 14Comments · Source: mapbox/mapbox-gl-js

I am trying to make this work with choojs and Browserify.

The error I'm getting: Missing Mapbox GL JS CSS Actually I need to open Chrome devtools to see the error message, it is written in a tag with display: none: <div class="mapboxgl-missing-css">Missing Mapbox GL JS CSS</div>

I have included a link to the CSS file in HTML, but still all I'm seeing is this error message.

What is Mapbox GL JS CSS? Is that a file name?

How do you determine that the CSS file is missing by the way? and why is that so important?

needs information

Source

tetsuo

Most helpful comment

I fixed this issue by adding this line import 'mapbox-gl/dist/mapbox-gl.css';. This approach requires css-loader in babel or something like it.

mistercrunch on 12 Jan 2018

👍40 ❤15 🎉14

All 14 comments

It's not an error, it's just a placeholder that becomes visible only when CSS is actually missing. Are you experiencing any problems with the map itself?

mourner on 1 Dec 2017

@mourner Thanks for the reply!

Following is the example I'm trying to make work:

const cache = require('cache-element')
const html = require('choo/html')
const choo = require('choo')

mapboxgl.accessToken = 'xxx';

const app = choo()
app.route('/', mainView)
app.mount('body')

const nav = cache(() => html`<div id="map" />`)

function mainView() {
  return html`
    <body onload=${() => {
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/dark-v9',
        center: [-93.261, 44.971]
      });
    }}>
      ${nav.render()}
    </body>
  `
}

and the HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf8" />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

I'm browserifying this with sheetify btw:

yarn run watchify app.js -t sheetify -o public/bundle.js -dv

And this is the end result I'm getting:

tetsuo on 1 Dec 2017

It's not an error, it's just a placeholder that becomes visible only when CSS is actually missing.

So the CSS file is not missing, the placeholder message is not visible, and the map is not showing :)

tetsuo on 1 Dec 2017

Can you set up a minimal JSFiddle test case with all the already generated code? We can't afford debugging all possible configurations of front-end bundling, but with an isolated test case, it would be easy to see where the problem is.

mourner on 1 Dec 2017

Hmm, I'm not sure if browserify works on JSfiddle, so I can't create a proper isolated test-case on it.

I thought maybe it is a known issue, since the example I used is super easy and the browserify usage is very common. Thanks for the answer. Unfortunately I cannot afford writing a test-case right now as well :\ Good luck.

tetsuo on 1 Dec 2017

I have the same problem, the CSS is loaded. I think it has something to do with me using React or Webpack.

zavan on 15 Dec 2017

For me the issue was that I had the css being loaded at the bottom of the DOM, not in the Head section. It was thus flashing up on my map while it loaded the DOM.

rhwilburn on 31 Dec 2017

👍6

I experienced this issue when upgrading from 0.40.1 to 0.43.0. Nothing else changed in my code. When downgrading back to 0.40.1, the missing CSS message went away.

ryanhamley on 12 Jan 2018

I fixed this issue by adding this line import 'mapbox-gl/dist/mapbox-gl.css';. This approach requires css-loader in babel or something like it.

mistercrunch on 12 Jan 2018

👍40 ❤15 🎉14

No need for a JSFiddle as it's happening on the official example pages: https://www.mapbox.com/mapbox-gl-js/example/simple-map/

screenshot from 2018-02-01 13-28-02

abevoelker on 1 Feb 2018

😄9

@abevoelker The presence of that div in the source shown in the developer console is expected behavior and does not indicate a problem. The Mapbox GL CSS file contains a directive that hides that div. If you are seeing it in the rendered result, it means that you forgot to include the CSS file.

jfirebaugh on 13 Feb 2018

👍2

My bad, sorry for the noise 🙇‍♂️

On Mon, Feb 12, 2018 at 6:06 PM John Firebaugh notifications@github.com
wrote:

@abevoelker https://github.com/abevoelker The presence of that div in
the source shown in the developer console is expected behavior and does not
indicate a problem. The Mapbox GL CSS file contains a directive that hides
that div. If you are seeing it in the rendered result, it means that you
forgot to include the CSS file.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/mapbox/mapbox-gl-js/issues/5785#issuecomment-365106105,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAJXc3LNiKgjHmXxCrjFJ2Lk4aBvQ-wuks5tUNH5gaJpZM4Qyas-
.