How to include “leaflet.css” in a React app with webpack?

Question

I using the survivejs.com site as a template to build a map based React app with webpack. For the map i am using leaflet but i can't find a way to add the leaflet.css. Without this the map tiles are displayed in the wrong order.

I have tried adding the leaflet.css to the App.jsx file using this

 require('leaflet/dist/leaflet.css');

but get the following error

ERROR in ./~/leaflet/dist/leaflet.css
Module parse failed: myApp/node_modules/leaflet/dist/leaflet.css Unexpected token (3:0)
You may need an appropriate loader to handle this file type.

If I had access to the index.html i could add it there but i with webpack, i'm unclear how to do this?

Answer 1

I solved it by simply importing the CSS like this:

import 'leaflet/dist/leaflet.css';

Answer 2

In my applications that use webpack (via create-react-app) I add the following line to the top of my css file relevant for maps:

/* map.css */

@import '~leaflet/dist/leaflet.css';

For example, this file could be map.css. I also put any custom map css styles in this file.

Then in my javascript / jsx file that uses the Map Component, I import this css file:

// map.js

import './map.css'

Answer 3

Webpack can't parse CSS without some help from a loader. The most commonly used CSS loader is webpack/css-loader.

I disagree with the answer from Lakshman Diwaakar in that I think it is extremely beneficial to import component specific CSS files within the JSX of that component, as it allows all the relevant code for that component to live in one place. If I remove the component, then that CSS is no longer part of any build. If I want to re-use a component then the CSS is right there to go with it.

Answer 4

OK So i got help from Juho Vepsäläinen from survivejs on this. HIs advice was to

To make it find Leaflet CSS, you should make sure to include the path to leaflet/dist/leaflet.css at your webpack configuration. You likely have a style path setting (PATHS.style) there if you have been following the material. Having something along path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css') should do the trick.

I followed his advice and added the following to webpack.config file:

style: [
   path.join(__dirname, 'app', 'main.css'),
   path.resolve(__dirname, 'node_modules/leaflet/dist/leaflet.css')
],

but i also needed to add a file loader later on

module: {
  loaders: [
   {test: /\.(png|jpg)$/, loader: "file-loader?name=images/[name].[ext]"}
]
}

Answer 5

This code worked for me.

1/ Import leaflet.css directly from leaflet (located inside of node_modules)

2/ Add useEffect, where replace map marker icons (by default markers were not visible, after leaflet.css import)

3/ Render any leaflet components🥳

import * as React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet-universal";
import "leaflet/dist/leaflet.css";

export default () => {
  React.useEffect(() => {
    const L = require("leaflet");

    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
      iconUrl: require("leaflet/dist/images/marker-icon.png"),
      shadowUrl: require("leaflet/dist/images/marker-shadow.png")
    });
  }, []);

  return (
    <Map center={[51.505, -0.09]} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        attribution='&amp;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>
    </Map>
  );
};

Answer 6

I have worked with leaflet and adding the leaflet to the index.html worked correctly. Usually, you dont add CSS files in JSX. All styling and external libraries are added in the index.html.

In my case it is index.jade. Implemented the open street map using leaflet and reactJS.