Search code examples
reactjsleafletcdn

Why am I unable to use packages via CDN in my react app?


I am currently trying to set up a map in react using leaflet. I set up my map component and app component in jsfiddle and everything works perfectly(https://jsfiddle.net/myulz/8Lg4qpmf/36/ ), but when I try to run a very similar project(MapContainer in components folder and main App component in project root) locally, it seems that none of my cdn packages are being loaded as I receive this error:

Failed to compile.

./src/components/MapContainer.js
  Line 7:   'L' is not defined         no-undef
  Line 8:   'L' is not defined         no-undef
  Line 16:  'L' is not defined         no-undef
  Line 22:  'L' is not defined         no-undef
  Line 23:  'L' is not defined         no-undef
  Line 24:  'L' is not defined         no-undef
  Line 29:  'FreeDraw' is not defined  no-undef
  Line 29:  'FreeDraw' is not defined  no-undef

Is there any reason why these packages are working fine on jsfiddle but not locally?

public/index.html *using react-router so my app component is set to a route and the router is sent to #root

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.js"></script>
    <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
    <script src="https://rawgit.com/Wildhoney/Leaflet.FreeDraw/master/dist/leaflet-freedraw.web.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
import React, { Component } from 'react';
import './App.css';
import MapContainer from './components/MapContainer'



class App extends React.Component {
  constructor(props) {
    super(props)

  }

  render() {
    return (
      <div>
        <MapContainer/>
      </div>
    )
  }
}

export default App;
import React from 'react';
import '../style.css';

class MapContainer extends React.Component {
  componentDidMount() {
      // create map
      var map = L.map('map', {
          center: new L.LatLng(38.898584, -77.020940),
          zoom: 10,
          maxBounds: bounds,
          minZoom: 4
      });

      var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
      var osm = new L.TileLayer(osmUrl, {
          minZoom: 0,
          maxZoom: 18,
          attribution: osmAttrib
      });

      var bounds = L.latLngBounds(
             L.latLng(5.499550, -167.276413), //Southwest
             L.latLng(83.162102, -52.233040)  //Northeast
         );


      map.addLayer(osm);
      const freeDraw = new FreeDraw({ mode: FreeDraw.ALL });
            map.addLayer(freeDraw);

    }

  render() {
    return <div id="map"></div>
  }
}

export default MapContainer;




Solution

  • You should use window.L and window.FreeDraw instead of L and FreeDraw