Fixing Mapbox Error

[erezamsalem]

Hello

in order to fix mapbox error please :

1. in app.js- change- app.use(helmet()) -> to >- app.use(helmet({ contentSecurityPolicy: false }))

2. in tour.pag - I update the version to - v2.9.1 :

script(src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js')
link(href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet')

and finally it works :-)

[ngechuerick]

FIXED MAPBOX ERROR 💯

This is how i fixed the mapbox error issue.

Mapbox using npm package

To begin with, I used mapbox-gl npm package.

Installation

Install the mapbox-gl package

  npm i mapbox-gl

Using

On your mapboxjs file, import the mapboxgl package which will enable you to use mapbox without setting any mapbox CDN scripts on your pug templates.

    import mapboxgl from 'mapbox-gl'

However,remember to include the css on the tour pug

    link(href='https://api.mapbox.com/mapbox-gl-js/v3.11.0/mapbox-gl.css' rel='stylesheet')

CSP fix

On your helmet configuration ensure the following is set.

 app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'none'"],
      scriptSrc: [
        "'self'",
        'https://api.mapbox.com/mapbox-gl-js/',
        'https://unpkg.com',
        "'unsafe-inline'",
        "'unsafe-eval'",
      ],
      workerSrc: ["'self'", 'blob:'], // For Mapbox Web Workers
      styleSrc: [
        "'self'",
        'https://api.mapbox.com/mapbox-gl-js/',
        'https://fonts.googleapis.com',
        "'unsafe-inline'",
      ],
      fontSrc: [
        "'self'",
        'https://fonts.gstatic.com',
        'https://api.mapbox.com/fonts/v1/mapbox/',
      ],
      imgSrc: ["'self'", 'data:', 'blob:', 'https://*.mapbox.com'],
      connectSrc: [
        "'self'",
        'https://api.mapbox.com/v4/',
        'https://api.mapbox.com/raster/v1/',
        'https://js.stripe.com/basil/stripe.js',
        'https://api.mapbox.com/rasterarrays/v1/',
        'https://api.mapbox.com/styles/v1/mapbox/',
        'https://api.mapbox.com/styles/v1/',
        'https://api.mapbox.com/fonts/v1/mapbox/',
        'https://api.mapbox.com/models/v1/mapbox/',
        'https://api.mapbox.com/map-sessions/v1',
        'https://events.mapbox.com/',
        'http://127.0.0.1:3000',
        'ws://localhost:1234/',
      ],
      frameSrc: [
        'https://js.stripe.com', // For Stripe Elements iframes
      ],
      baseUri: ["'self'"],
      formAction: ["'self'"],
      frameAncestors: ["'self'"],
      objectSrc: ["'none'"],
      scriptSrcAttr: ["'none'"],
      upgradeInsecureRequests: [],
    },
  }),
);

Final fix on the package.json. Ensure that your package.json has the following. This is to ensure that parcel does not interfere with mapbox scripts.

"alias": {
    "mapbox-gl": "mapbox-gl/dist/mapbox-gl.js"
  },
  "targets": {
    "default": {
      "context": "browser",
      "outputFormat": "esmodule",
      "engines": {
        "browsers": "> 0.5%, last 2 versions, not dead"
      }
    }
  }

Documentation

Check out the mapbox-gl documentation for detailed explanation

Documentation