Comments (27)
So yeah, MapBox officially ditched the webpack support: mapbox/mapbox-gl-js#3235
Now, we are supposed to require directly the .js file: https://github.com/mapbox/mapbox-gl-js#using-mapbox-gl-js-with-other-module-systems
What would be the best solution to integrate react-map-gl
now?
from react-map-gl.
worked for me
alias: {
'mapbox-gl/js/geo/transform': path.join(__dirname, "/node_modules/mapbox-gl/js/geo/transform"),
'mapbox-gl': path.join(__dirname, "/node_modules/mapbox-gl/dist/mapbox-gl.js")
}
from react-map-gl.
@cpietsch which version of mapbox-gl
were you using? I've tried your solution got this:
ERROR in ./~/mapbox-gl/js/util/util.js
Module parse failed: /home/lhrazk/-/projects/wb/1611-civitas-portal/web/node_modules/mapbox-gl/js/util/util.js Unexpected token (15:35)
You may need an appropriate loader to handle this file type.
| * @private
| */
| exports.easeCubicInOut = function(t: number): number {
| if (t <= 0) return 0;
| if (t >= 1) return 1;
@ ./~/mapbox-gl/js/geo/transform.js 6:11-34
@ ./~/react-map-gl/dist/utils/transform.js
@ ./~/react-map-gl/dist/map.react.js
@ ./~/react-map-gl/dist/index.js
@ ./~/react-map-gl/index.js
This may be caused by the introduction of flow in mapbox-gl
. Any thoughts?
UPD: I got this fixed. It turned out I did not have Flow transpiler in my babel config.
-
npm install babel-plugin-transform-flow-strip-types --save-dev
-
In
.babelrc
or"babel"
section inpackage.json
:
"plugins": [
"...other plugins...",
"transform-flow-strip-types"
],
- If your webpack loader is configured to ignore stuff in
node_modules
(which is a good idea for build performance), amend this rule to makemapbox-gl/js
an exception:
loaders: [{
test: /\.js$/,
loader: 'babel',
// exclude: /node_modules/, // remove
exclude: /node_modules\/(?!mapbox-gl\/js)/, // add
}, {
// ...
- If you've already had
.flowconfig
in your project's directory, make sure thatnode_modules
is not excluded there.
from react-map-gl.
my head is spinning with this stuff, I've tried aliasing the above to get react-map-gl going with webpack, but all I'm getting is:-
index.js:9 Uncaught TypeError: Cannot convert undefined or null to object
From webpack:///./~/mapbox-gl/~/webworkify/index.js?
. My hunting has then led me to borisirota/webworkify-webpack#18 (where the author has posted a recent update regarding v2).
Does the webworkify dependency need to be bumped now? Has anyone got an up-to-date gist or something of this working?
😄 🔫
from react-map-gl.
@gaving If you are getting that error then webworkify
is probably being bundled which in my experience is a sign that the mapbox-gl-js
src is being used rather then the prebuild dist. To debug I deleted the contents of node_modules/mapbox-gl/js/
since most of that isn't needed and then followed those errors. Using just the above aliases is currently working for me (you would probably need to adjust your paths) on 1.7.0.
from react-map-gl.
@G2Jose Thanks, link updated
from react-map-gl.
FYI, Mapbox has posted their official Webpack config that contains all the loaders needed to get Mapbox GL JS working in Webpack:
https://github.com/mapbox/mapbox-gl-js/blob/master/webpack.config.example.js
I was getting errors on the page before adjusting my config to match theirs. No errors anymore, but also no tiles. Going to see if setting my access_token
makes a difference 😉
from react-map-gl.
@owap - Awesome, I have added this info to the README file.
from react-map-gl.
I think the solution is to have react-map-gl import mapbox-gl/dist/mapbox-gl
instead of mapbox-gl
- I'll test it on a fork and send a PR if it works out.
from react-map-gl.
Hi @contra,
I've had a play and there are some issues. You'll need two aliases for the geo/transform source. There are bigger issues though, moving from 0.25.0 webpack/mapbox uses dist which could create version mismatch issues
from react-map-gl.
Alright, definitive answer -
Method 1: You can still use the old way! Update webworkify-webpack once borisirota/webworkify-webpack#21 is published and your existing stuff should work fine.
Method 2: Alternatively, you can remove all of the old hacks (webworkify, glsl compile, etc.) and set up an alias which should work in most cases:
resolve: {
alias: {
'mapbox-gl/js/mapbox-gl.js': 'mapbox-gl/dist/mapbox-gl.js'
}
}
from react-map-gl.
Has anyone gotten @contra 's aliasing method working(I tried and failed with 1.7)? Transforming brfs
and webworkerify-webpack
would still be required correct?,are there specific dependency versions as well?
from react-map-gl.
@davidhampgonsalves Aliasing (method 2) should work fine with no other hacks. Method 1 w/ webworkify-webpack and the brfs hacks is the same as the old instructions, but you have to use my fork of webworkify-webpack for it to work until they merge my PR.
from react-map-gl.
Thanks @contra. I couldn't get that working but was able to with
alias: {
'mapbox-gl/js/geo/transform': path.join(__dirname, "mapbox-gl/js/geo/transform"),
'mapbox-gl': path.join(__dirname, "mapbox-gl/dist/mapbox-gl.js")
}
I added the transform alias to handle https://github.com/uber/react-map-gl/blob/master/src/utils/transform.js#L23
from react-map-gl.
@davidhampgonsalves 👍 Thanks for the tip, this got things working.
Turns out the paths weren't resolving correctly (I'm using nwb and had stripped out __dirname thinking substituting './node_modules' would do it, but it turns out you need the full absolute path). Paths didn't need adjusted.
Thanks again for the heads up, been a good couple of hours getting to the bottom of that!
from react-map-gl.
For all the folks that followed this issue, please note that a working webpack example can be found in the deck.gl repo. I will land a PR soon to reference this in the Readme.
Sorry for the wait! 😁
from react-map-gl.
I am trying use this package but i get this error
Error: Cannot find module 'gl'
, i searched in issues but cannot get it solved
I try use it with react starter kit
from react-map-gl.
Error: Cannot find module 'gl'
You should not see this error in the browser. If you are trying to run mapbox-gl in node, it will try to load gl
(headless-gl, a webgl implementation for Node.js). Just yarn add gl
or npm install --save gl
and try again (you may also need to install jsdom
and sinon
).
from react-map-gl.
@Shadowman4205 what version of react-map-gl
are you installing?
from react-map-gl.
@apercu That link seems to be broken - https://github.com/uber/deck.gl/tree/master/exhibits/webpack
from react-map-gl.
@ibgreen My brain is going to explode. I tried ur solution but i get errors on installing gl i am getting this error.
Then i tried using this approach in my application
class Map extends React.Component {
render() {
var MapGL = require('react-map-gl');
if (process.env.BROWSER) {
return (
<div>Browser</div>
)
}
else { return <div>Test</div> }
}
}
but i get this error
vendor.js:129692 Uncaught SyntaxError: Identifier 'Buffer' has already been declared
client.js:1 Uncaught ReferenceError: webpackJsonp is not defined
at client.js:1
@abmai i installed last version.
from react-map-gl.
@Shadowman4205 last version being v3-alpha
or v2.0.3
?
The webpackJsonp
seems like a webpack-related issue, are you building your whole application using webpack?
FWIW - you should try the following, in order to get around requiring gl
because of server-side rendering (if you're doing any of that).
const isBrowser = require('is-browser'); // npm package
var MapGL = 'div';
if (isBrowser) {
MapGL = require('react-map-gl');
}
class Map extends React.Component {
render() {
return (
<MapGL ... />
)
}
}
from react-map-gl.
@abmai
I am using 2.0.3 version.
Yeah i am using webpack for more specific i have used react starter kit.
I tried this package "is-browser" but still same with
process.env.BROWSER
from react-map-gl.
is-browser
is browserify specific and won't work in webpack. You need to use something else, like the BROWSER
env maybe if you use the webpack define plugin (but be careful of the real BROWSER
variable), or check window
(also be careful if you intent to mock it with something like jsdom for the tests)
from react-map-gl.
I'm trying to use the react-map-gl module with Webpack 2 but without babel (to avoid debugging wiht sourcemaps). I followed the instructions and have
alias: { 'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js'), },
in my webpack.config.js. When I start webpack I get the following error:
ERROR
in ./node_modules/mapbox-gl/js/geo/coordinate.js
Module parse failed: /Users/andy/code/rescape_ramble/node_modules/mapbox-gl/js/geo/coordinate.js Unexpected token (14:10)
You may need an appropriate loader to handle this file type.
| */
| class Coordinate {
| column: number;
| row: number;
| zoom: number;
@ ./node_modules/mapbox-gl/js/geo/transform.js 5:17-40
@ ./node_modules/react-map-gl/dist/utils/transform.js
@ ./node_modules/react-map-gl/dist/map.react.js
@ ./node_modules/react-map-gl/dist/index.js
@ ./node_modules/react-map-gl/index.js
Does anyone know why react-map-gl's import of mapbox-gl is not aliasing to ./node_modules/mapbox-gl/dist/mapbox-gl.js? It seems like webpack should correctly process the import and avoid using the mabox source with the typescript in it. Thanks.
from react-map-gl.
@calocan Looks like you are using react-map-gl v2. This has been fixed in v3.
from react-map-gl.
Thanks, I missed that update. That fixed it.
from react-map-gl.
Related Issues (20)
- [Bug] Draw Polygon calls onClick for Map when drawing
- [Bug]Returning response json source not drawing Markers on map. HOT 2
- [Bug] geojson example is not redirecting to source
- Uncaught TypeError: Cannot read properties of null (reading 'point') HOT 4
- [Bug] Fog & marker issue - getOpacityAtLatLng HOT 2
- Canvas width/height don't update when container's width/height are changed HOT 5
- [Bug] Quickly double-clicking on maps prevents zooming in HOT 1
- Updating the accessToken doesn't update the API call and crash HOT 1
- [Bug] Can't set configuration property for map HOT 1
- [Bug] CORS Error on electron HOT 1
- [Feat] Custom map.querySourceFeatues Renderer HOT 2
- Support Maplibre GL JS 4.x HOT 2
- [Bug] missing advanced example for geocoder HOT 2
- [Bug] ssr support missing example to await for geocoder results HOT 3
- [Bug] incompatible dom objects within the react landscape HOT 4
- When setting maxZoom and dragging map around markers are moving all over the place [Bug] HOT 1
- [Bug] [docs] Link to MapLibre API docs are broken
- [Feat] Add support for latest Mapbox rendering release (V3) HOT 1
- [Bug] Input data given to 'xxx' is not a valid GeoJSON object
- [Bug] Map loading issue on resizing width HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-map-gl.