polyline is not defined in react-leaflet tried to solve the issue from Months.Below is the code

[rohith231]

import React, { Component } from "react";
import { Map, Marker, Popup, FeatureGroup,LayersControl,TileLayer  } from "react-leaflet";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";
import { EditControl } from "react-leaflet-draw";
import L from "leaflet";
import "leaflet-routing-machine/dist/leaflet-routing-machine.css";
import "leaflet-routing-machine";

import { withLeaflet } from "react-leaflet"

import './centre.css'
import Routing from "./Routing";


import * as ELG from "esri-leaflet-geocoder";


const { BaseLayer } = LayersControl;




// import marker icons
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl:
    "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon-2x.png",
  iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",
  shadowUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-shadow.png"
});





 class Path extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: 17.3850 ,
      lng: 78.4867,
      zoom: 13,
      marker: [17.3850 ,78.4867]
    };
  }





  
  componentDidMount() {
    const map = this.leafletMap.leafletElement;
    const searchControl = new ELG.Geosearch().addTo(map);
    const results = new L.LayerGroup().addTo(map);
    const Polyline =  L.Polyline.Arc () ({
      color: 'red',
      vertices: 200
  }).addTo(Map);

    searchControl.on("results", function(data) {
      results.clearLayers();
      for (let i = data.results.length - 1; i >= 0; i--) {
        results.addLayer(L.marker(data.results[i].latlng));
      }
    });
      
    map.on("polyline", function(data) {
      
    });




  }

  terrain = "TERRAIN";
  key = "AIzaSyC0QH9aiCXuuRjJe4k5lzAM2bYl-MUhiPk";

  removeEverything = e => {
    console.log(e);
    const { lat, lng } = e.layer._latlng;
    this.setState({ marker: [lat, lng] });
    const { edit } = this.refs;
    var layerContainer = edit.leafletElement.options.edit.featureGroup;
    const layers = layerContainer._layers;
    const layer_ids = Object.keys(layers);
    layer_ids.splice(0, 1);
    layer_ids.forEach(id => {
      const layer = layers[id];
      layerContainer.removeLayer(layer);
    });
  };

  setPos = () => {
    this.setState({ marker: [17.3850, 78.4867] });
  };

  handleOnZoomed = e => {
    this.setState({ zoom: e.target._zoom });
  };


  render() {
    const position = [this.state.lat, this.state.lng];
    const center = [17.3850, 78.4867];


  

    return (
     <div>

        <pre>{JSON.stringify(this.state)}</pre>
        <button onClick={this.setPos}>remove</button>
        <Map
          center={this.state.marker}
          zoom={this.state.zoom}
          onzoomend={this.handleOnZoomed}
          ref={m => {
            this.leafletMap = m;
          }}
        >
           


          <Marker
            position={this.state.marker}
            defaultMarker={{ position: true }}
          >
          </Marker>
           
        

          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
          <FeatureGroup>
            <EditControl
              ref="edit"
              position="topright"
              onCreated={this.removeEverything}
              CircleMarker ="true"
              removalMode ="true"
              pinningOption ="true"
              snappingOption = "true"
              draw={{
                rectangle: true,
                polygon:true,
                CircleMarker:true,
                removalMode:true,
                pinningOption:true,
                snappingOption:true

              }}
            />
          </FeatureGroup>
          {/* <ReactLeafletGoogleLayer
            googleMapsLoaderConf={{ KEY: this.key }}
            type={"satellite"}
          /> */}
    
        <div className="pointer" />
        </Map>
      
        </div>
    );
  }
}

export default Path

[Michele Bertoli]

Thanks for opening this issue, @rohith231.

This seems to be a problem with react-leaflet, so I'd recommend you to move the conversation there.