43275

Including external scripts with global references using Webpack

Question:

I am working on using Webpack 2 to package some oldish javascript code. This code uses the Leaflet 1.0 library and also includes a Leaflet plugin (named Google.js) that simply references the global L variable that leaflet exposes.

In the current html page, leaflet and then the plugin (Google.js) is loaded and then the map1.js code via script tags. Which all works fine.

I have created the following webpack.config.js:

var path = require('path'); module.exports = { devtool: 'cheap-eval-source-map', entry: { map1: './js/map1.js' }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };

and in the map1.js I have added the following to define the dependency requirements for webpack:

import bootstrap from 'bootstrap'; import leaflet from 'leaflet'; require('script-loader!./lib/Google.js');

The bundle.js builds without issue however when the page loads, I get:

Uncaught TypeError: Cannot read property 'call' of undefined at NewClass.whenReady (eval at (bundle.js:79), :3641:12) at NewClass.addLayer (eval at (bundle.js:79), :4057:8) at eval (eval at (bundle.js:176), :118:7) at eval (eval at (bundle.js:176), :232:3) at Object. (bundle.js:176) at __webpack_require__ (bundle.js:20) at bundle.js:66 at bundle.js:69

Looking at line 79 where the errors occurs:

eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/*\n Leaflet 1.0.3, a JS library for interactive maps...

it appears to failing on doing an eval of the leaflet code. Should I be doing anything else to incorporate Leaflet into my webpack build?

Answer1:

I just tried a very simple webpack project using <a href="https://gitlab.com/IvanSanchez/Leaflet.GridLayer.GoogleMutant" rel="nofollow">Leaflet.GridLayer.GoogleMutant</a> instead, and it works like a charm:

import 'leaflet'; import 'leaflet.gridlayer.googlemutant'; var map = L.map('map').setView([0,0],0); var roadMutant = L.gridLayer.googleMutant({ maxZoom: 24, type:'roadmap' }).addTo(map);

That will work as long as you reference the GMaps JS API in a separate <script> in your HTML. And npm install leaflet leaflet.gridlayer.googlemutant, of course.

Recommend

  • extract-text-webpack-plugin - extracting scss results in no mapping in main.css.map
  • Webpack bundle client specific components
  • to set MutationObserver, How to inject javascript before page-loading using Selenium
  • Cannot go directly to dynamic route with react-router and webpack-dev-server
  • How does Task Parallel Library scale on a terminal server or in a web application?
  • Audio Sound Too Low in Android App
  • Dijkstra with a heap. How to update the heap after relaxation?
  • Is it faster to create a new object reference if it will only be used twice?
  • Kentico Repeater HTML Properties showing with selected transformation
  • How to change display text in item template based on eval in gridview?
  • Can't resolve 'jquery' with typescript
  • Relative paths. baseUrl and paths not working on ionic2 - angular2
  • passing a default argument to a browserify module
  • Why must we declare a variable name when adding a method to a struct in Golang?
  • Access variable of ScriptContext using Nashorn JavaScript Engine (Java 8)
  • Not able to aggregate on nested fields in elasticsearch
  • rspec simple example getting error on request variable in integration test
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • Is there a perl module to validate passwords stored in “{crypt}hashedpassword” “{ssha}hashedpassword
  • How to attach a node.js readable stream to a Sendgrid email?
  • Why does access(2) check for real and not effective UID?
  • Is it possible to access block's scope in method?
  • Meteor helpers not available in Angular template
  • Exception “firebase.functions() takes … no argument …” when specifying a region for a Cloud Function
  • Spray.io: When (not) to use non-blocking route handling?
  • Sony Xperia Z Tablet not found by adb
  • How to recover from a Spring Social ExpiredAuthorizationException
  • Incrementing object id automatically JS constructor (static method and variable)
  • script to move all files from one location to another location
  • ILMerge & Keep Assembly Name
  • Symfony2: How to get request parameter
  • Websockets service method fails during R startup
  • Large data - storage and query
  • How can I estimate amount of memory left with calling System.gc()?
  • WOWZA + RTMP + HTML5 Playback?
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Free memory of cv::Mat loaded using FileStorage API
  • using HTMLImports.whenReady not working in chrome
  • Hits per day in Google Big Query
  • unknown Exception android