CODEWITHSUNDEEP
mapboxmapbox-gl-js
interpolated
interpolated

Reputation: 47

how do you import mapbox-gl-draw using webpack?

I am using create-react-app and trying to install mapbox-gl-draw.

npm install @mapbox/mapbox-gl-draw

This works with some npm warnings. I then try to pull mapbox-gl-draw into a component like this:

import React,{Component} from 'react';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
import ReactMapboxGl from 'react-mapbox-gl';
import MapboxDraw from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'

console.log(MapboxDraw)

I just get an empty object.

I am using create-react-app. Do I need to use a different webpack .config file.

What is the best way to import mapbox modules like this?

Upvotes: 2

Views: 2001

Answers (2)

Shawn Goulet
Shawn Goulet

Reputation: 108

To expand upon medv's answer, at current, in your package.json, you need to add the mapbox-gl v0.270 - v0.38.0, like:

"mapbox-gl": ">=0.27.0 <=0.38.0 when using "@mapbox/mapbox-gl-draw": "^1.0.1".

This is explained at the 'Requires' line here & if you look at the peerDependencies in the package.json.

Upvotes: 0

medv
medv

Reputation: 141

If you're using webpack, you need to alias to use mapbox-gl dist file, here is how I have done it using webpack2:

    resolve: {
      modules: ['src', 'node_modules'],
      extensions: ['.js', '.jsx', '.json', '.css', '.svg'],
      alias: {
        // mapbox-gl related packages in webpack should use dist instead of the default src
        '@mapbox/mapbox-gl-draw': path.resolve(root, 'node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js'),
      },
    },

Variable "root" was defined earlier in the file to refer to the root directory of the project, on the same level as package.json etc.

The same problem can happen in react-map-gl-alt where you need to alias 'mapbox' to 'node_modules/mapbox/dist/distfilehere.js'.

Upvotes: 2

Related Questions