Почему я не могу использовать пакеты через CDN в своем приложении реакции? - PullRequest
Новая
       19

Почему я не могу использовать пакеты через CDN в своем приложении реакции?

0 голосов
/ 15 апреля 2019

В настоящее время я пытаюсь настроить карту с помощью листовки.Я настроил свой компонент карты и компонент приложения в jsfiddle, и все работает отлично (https://jsfiddle.net/myulz/8Lg4qpmf/36/), но когда я пытаюсь запустить очень похожий проект (MapContainer в папке компонентов и основной компонент приложения в корне проекта), онКажется, что ни один из моих пакетов cdn не загружается, когда я получаю эту ошибку: 

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

Есть ли причина, по которой эти пакеты работают нормально на jsfiddle, но не локально?

public / index.html * с использованием response-router, поэтому мой компонент приложения настроен на маршрут, а маршрутизатор отправляется на # 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;

1 Ответ

0 голосов
/ 15 апреля 2019

Вы должны использовать window.L и window.FreeDraw вместо L и FreeDraw

...