Leaflet.timeline | Display arbitrary GeoJSON on a map with a timeline slider | Dataset library

There are a few issues with your setup:

1. The 'leaflet.timeline' plugin assumes the leaflet module is available as the global variable 'L'. The source code of the plugin shows this to be true (on master at the time of this post): https://github.com/skeate/Leaflet.timeline/blob/b7a8406f5a9a66ccdbcaf73465baaedadec76d1f/src/Timeline.js#L1
2. (I believe) You are using more than one entry point on the page at one time: 'application.js' and 'mapTwo.js'. Rails calls entry points "packs", so everything in app/javascript/packs is a separate entry point to Webpack. Webpack recommends 1 entry point per page; without extra configuration, multiple entry points on one page can lead to surprising behavior, especially with regards to global variables (see #1).

To elaborate further on issue 2, with your current configuration, Webpack doesn't know you want to use two entry points on the page; it bundles one instance of the Leaflet module in the application pack and another instance of the Leaflet module in the mapTwo pack. It bundles the Leaflet module in mapTwo because you added the ProvidePlugin configuration L: 'leaflet', which says, basically, add var L = require('leaflet') to every module that references L.

So there are a few possible fixes:

1. Move your import 'leaflet.timeline' into mapTwo.js and remove import 'leaflet' from application.js. You don't need import 'leaflet' given your ProvidePlugin config. This is the easiest fix to address the short-term issue of L.timeline is not a function. It does not prevent you from bundling modules like Leaflet twice when using multiple entry points on the page, say if you were to need to add import 'leaflet' somewhere in the application.js dependency graph. OR

2. Don't split up your packs; consolidate all your existing code in the dependency graph of 'application.js'. You may need to wrap your existing mapTwo code in callback, i.e., document.addEventListener('DOMContentLoaded', callback). OR

3. Use the SplitChunksPlugin, which is a way of sharing modules across Webpack "chunks" which, in your case, means the entry points, application.js and mapTwo.js. This means, keep your existing code in separate packs along with additional changes described in more detail in the Rails Webpack docs: https://github.com/rails/webpacker/blob/master/docs/webpack.md#add-splitchunks-webpack-v4. You may need to also wrap mapTwo.js code in the DOMContentLoaded listener, as in 2.

Finally, remove this code from your configuration; as this was copied from another solution, it's not adding any value to your setup: