title: Leaflet with Webpack in Rails 6. L.timeline is not a function
body: <p>This looks just like the question @rossta answered for <a href="https://stackoverflow.com/questions/59042437/gmaps-with-rails-6-webpack">Gmaps</a>, but I don't understand the problem and answer well enough to make his suggestion work.</p>
  
  <p>The error is: <code>Uncaught TypeError: L.timeline is not a function
      at Object.success (mapTwo.js:14)</code> Line 14 is <code>var timelineData = L.timeline(data_data, {</code>. Complete code below.</p>
  
  <p>I removed the leaflet gems that work in Rails 5.2 and in console</p>
  
  <pre><code>yarn add leaflet
  yarn add leaflet.timeline
  </code></pre>
  
  <p>and code:</p>
  
  <pre><code>// app/javascript/packs/application.js
  import "core-js/stable"
  import "regenerator-runtime/runtime"
  import '../stylesheets/application'
  window.jQuery = $
  window.$      = $
  import 'leaflet'
  import "leaflet.timeline"
  require("@rails/ujs").start()
  require("turbolinks").start()
  require("@rails/activestorage").start()
  require("trix")
  require("@rails/actiontext")
  require("jquery") 
  import "bootstrap"
  import 'bootstrap/dist/js/bootstrap'
  
  document.addEventListener("turbolinks:load", () =&gt; {
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
  })
  
  &lt;!-- map/index.html.erb --&gt;
  &lt;div id="map_two"&gt;&lt;/div&gt;
  &lt;%= javascript_pack_tag 'mapTwo' %&gt; 
  
  
  // javascript/packs/mapTwo.js  called from map/index.html.erb
  console.log('Hello from /javascript/packs/mapTwo.js')
  var mapVar = L.map("map_two", {
    center: [34.040951, -118.258579],
    zoom: 13
  });
  L.tileLayer('https://crores.s3.amazonaws.com/tiles/bkm/{z}/{x}/{y}.png').addTo(mapVar);
  $.getJSON("map/line_data.geojson", function(data_data) {
    var timelineData = L.timeline(data_data, {
      style: function(data_data) {
        return {
          stroke: true,
          fillOpacity: 0.5
        }
      }, // end style: function(data_data)
      waitToUpdateMap: true,
      onEachFeature: function(data_data, layer) {
          layer.bindTooltip(data_data.properties.popup, {
            direction: 'top'
          });
        } // onEachFeature: 
    }); // end let timelineData = L.timeline
    var timelineControl = L.timelineSliderControl({
      enableKeyboardControls: true,
      steps: 100,
      start: 1885,
      end: 1928,
    });
    timelineControl.addTo(mapVar);
    timelineData.addTo(mapVar);
    timelineControl.addTimelines(timelineData);
  }); //  end $.getJSON
  </code></pre>
  
  <p>My attempt at applying the solution offered:</p>
  
  <pre><code>// config/webpack/environment.js
  const { environment } = require('@rails/webpacker')
  const webpack = require('webpack')
  
  environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      jquery: 'jquery',
      // 'window.Jquery': 'jquery', 
      Popper: ['popper.js' ,'default'],
      L: 'leaflet' // didn't help
    }))
  
  // https://stackoverflow.com/questions/59042437/gmaps-with-rails-6-webpack
  environment.loaders.append('leaflet', {
    test: /map/,
    use: [
      {
        loader: 'imports-loader',
        options: 'this=&gt;window',
      },
    ],
  })
  
  environment.plugins.append(
    'lodash',
    new webpack.ProvidePlugin({
      _: 'lodash',
    })
  )
  
  module.exports = environment
  </code></pre>
  
  <p><code>package.json</code></p>
  
  <pre><code>{
    "license": "ISC",
    "main": "application.js",
    "dependencies": {
      "@rails/actiontext": "^6.0.0",
      "@rails/ujs": "^6.0.1",
      "@rails/webpacker": "4.2.2",
      "bootstrap": "^4.4.1",
      "core-js": "^3.5.0",
      "imports-loader": "^0.8.0",
      "jquery": "^3.4.1",
      "jqueryui": "^1.11.1",
      "leaflet": "^1.6.0",
      "leaflet.timeline": "^1.2.1",
      "lodash": "^4.17.15",
      "mapbox": "^1.0.0-beta10",
      "ol": "^6.1.1",
      "ol-ext": "^3.1.7",
      "ol-layerswitcher": "^3.4.0",
      "ol-loupe": "^1.0.1",
      "popper.js": "^1.16.0",
      "regenerator-runtime": "^0.13.3",
      "trix": "^1.0.0",
      "turbolinks": "^5.2.0",
      "webpack": "^4.41.2"
    },
    "devDependencies": {
      "webpack-dev-server": "^3.10.0"
    }
  }
  </code></pre>