React Leaflet: Failed to load sourcemap

Question

My leaflet map is failing to show even though I apparently set up all following documentation. The only message in console I get is:

DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

My component as per documentation:

import React from 'react'; import { Grid } from '@material-ui/core'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; const MapContent = props => { return ( <Grid component="section" className="tkr-map__content leaflet-container" height="100vh" width="100%" item={true} sm={12} md={10}> <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[51.505, -0.09]}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </Grid> ); }; export default MapContent;

I'm not sure if at this point, it can depends from my local server, Material UI, webpack or something else I'm currently ignoring.

Any suggestion would be appreciated.

Import leaflet.css if you haven't done already and set style={{height: '100vh'}} on MapContainer not Grid. I think the error is irrelevant with the fact that map is not showing. — kboul
– kboul, Commented Nov 1, 2020 at 18:32

A.R.SEIF · Accepted Answer · 2020-11-05 05:50:06Z

The following steps should be followed
install yarn add leaflet react-leaflet

add css file to index.js like below
import "leaflet/dist/leaflet.css";

and add height is important .height: "400px"
sample code

import React from "react"; import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet"; export default function App() { return ( <div> <MapContainer style={{ height: "400px" }} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} > <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={[51.505, -0.09]}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer> </div> ); }

Work Demo

Yes apologies, I will have sometime to test it this weekend. Thanks

João Melo · Accepted Answer · 2020-11-05 23:00:08Z

1

It seems to be an issue with the "React Developer Tools" Chrome extension - see this answer.

answered Nov 5, 2020 at 23:00

João Melo

8358 silver badges19 bronze badges

1 Comment

middlelady Over a year ago

Thanks, it wasn't fixing my issue, but interesting anyways.

Collectives™ on Stack Overflow

React Leaflet: Failed to load sourcemap

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related