Missing Mapbox GL JS CSS #5785

tetsuo · 2017-12-01T14:29:27Z

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?

The text was updated successfully, but these errors were encountered:

mourner · 2017-12-01T14:33:40Z

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?

tetsuo · 2017-12-01T14:47:01Z

@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 · 2017-12-01T14:50:48Z

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 :)

mourner · 2017-12-01T14:52:46Z

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.

tetsuo · 2017-12-01T15:03:04Z

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.

zavan · 2017-12-15T20:41:10Z

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

rhwilburn · 2017-12-31T05:53:37Z

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.

ryanhamley · 2018-01-12T18:28:19Z

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.

mistercrunch · 2018-01-12T22:39:40Z

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.

abevoelker · 2018-02-01T19:29:47Z

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

jfirebaugh · 2018-02-13T00:06:10Z

@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.

abevoelker · 2018-02-13T01:14:09Z

My bad, sorry for the noise 🙇‍♂️

…

On Mon, Feb 12, 2018 at 6:06 PM John Firebaugh ***@***.***> 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 <#5785 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAJXc3LNiKgjHmXxCrjFJ2Lk4aBvQ-wuks5tUNH5gaJpZM4Qyas-> .

alexmac131 · 2018-02-18T19:03:46Z

For Angular 5, import the type into your style.css,

@import '../node_modules/mapbox-gl/dist/mapbox-gl.css';

Takes care of the problem completely. @mistercrunch - Thank you, for your solution, my own is just a modification of yours for Angular 5 ..

barrylachapelle · 2018-08-24T17:32:16Z

create-reat-app: import 'mapbox-gl/src/css/mapbox-gl.css';

Fixes #191. When loading the address page, the following annoying warning is always logged: > This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/. The actual page doesn't seem to have any visual problems, though... Still, the warning is annoying and according to mapbox/mapbox-gl-js#5785 we need to import the CSS in our code, which this commit does, and the warning goes away. I just hope it's not adding unnecessary bloat to our page weight.

mourner added the needs information 🙏 label Dec 1, 2017

mourner closed this as completed Dec 1, 2017

jfirebaugh mentioned this issue Dec 1, 2017

Make "Missing Mapbox GL JS CSS" a console warning #5786

Closed

lbud mentioned this issue Mar 1, 2018

Use console warning rather than DOM element to indicate missing stylesheet #6261

Merged

3 tasks

chriszrc mentioned this issue Dec 24, 2018

Missing Mapbox GL JS CSS soal/vue-mapbox#27

Closed

wojdziw mentioned this issue Mar 29, 2020

Add an offline map Appsilon/mbaza#39

Merged

toolness mentioned this issue Aug 7, 2020

Include Mapbox GL CSS. JustFixNYC/who-owns-what#387

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Missing Mapbox GL JS CSS #5785

Missing Mapbox GL JS CSS #5785

tetsuo commented Dec 1, 2017

mourner commented Dec 1, 2017

tetsuo commented Dec 1, 2017 •

edited

Loading

tetsuo commented Dec 1, 2017 •

edited

Loading

mourner commented Dec 1, 2017

tetsuo commented Dec 1, 2017

zavan commented Dec 15, 2017

rhwilburn commented Dec 31, 2017 •

edited

Loading

ryanhamley commented Jan 12, 2018

mistercrunch commented Jan 12, 2018

abevoelker commented Feb 1, 2018

jfirebaugh commented Feb 13, 2018

abevoelker commented Feb 13, 2018 via email

alexmac131 commented Feb 18, 2018

barrylachapelle commented Aug 24, 2018

Missing Mapbox GL JS CSS #5785

Missing Mapbox GL JS CSS #5785

Comments

tetsuo commented Dec 1, 2017

mourner commented Dec 1, 2017

tetsuo commented Dec 1, 2017 • edited Loading

tetsuo commented Dec 1, 2017 • edited Loading

mourner commented Dec 1, 2017

tetsuo commented Dec 1, 2017

zavan commented Dec 15, 2017

rhwilburn commented Dec 31, 2017 • edited Loading

ryanhamley commented Jan 12, 2018

mistercrunch commented Jan 12, 2018

abevoelker commented Feb 1, 2018

jfirebaugh commented Feb 13, 2018

abevoelker commented Feb 13, 2018 via email

alexmac131 commented Feb 18, 2018

barrylachapelle commented Aug 24, 2018

tetsuo commented Dec 1, 2017 •

edited

Loading

tetsuo commented Dec 1, 2017 •

edited

Loading

rhwilburn commented Dec 31, 2017 •

edited

Loading