ESLint: "'L' is not defined" at init with single file components

Question

I'm ready to be told that I'm doing something plain stupid, because while I've prior experience with VueJS and with Leaflet, this is my first project using single file components for Vue, the first time I've used vue2-leaflet, and a fresh setup of node, npm and VueCLI, with none of which I'm very practiced - plenty of room for mistakes! However, I've been going round and round this all day, and it doesn't seem to make much sense.

Currently, the app is not far beyond the VueCLI created project. In main.js, I have put:

import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';
Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);

which is now right at the top of that file, in case my problems were to do with order of declaration and instantiation, but that doesn't seem to be the case.

I then have a 'mapiface.vue' file under src/views with associated route defined in index.js. Other than style informatin, the content of 'mapiface.vue' is:

<template>
  <div id="mapview"> 
  <l-map id="themap" :zoom="zoom">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
  </l-map>
  </div>
</template>

<script>
module.exports = {
data() {
    console.log(L); //Let's see whether L exists, then
    return {
      zoom:3,
      center: L.latLng(47.413220, -1.219482),
      url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution:'&copy; <a href="http://osm.org/copyright">OSM</a> contributors',
      //marker: L.latLng(47.413220, -1.219482),
    }
  }
}
</script>

As soon as I save this file, or refresh the output page, I get the following:

25:17  error  'L' is not defined  no-undef   
29:15  error  'L' is not defined  no-undef

In the file, those line numbers correspond to my console.log and center lines.

However, in the console, right there under the above error, I get:

{…}
​
Bounds: function Bounds()​
Browser: Object { ie: false, ielt9: false, edge: false, … }
​
CRS: Object { latLngToPoint: latLngToPoint(), pointToLatLng: pointToLatLng()
, infinite: false, … }
​
Canvas: function NewClass()​
Circle: function NewClass()​
CircleMarker: function NewClass()​
Class: function Class()​
Control: function NewClass()​
DivIcon: function NewClass()​
DivOverlay: function NewClass()​
DomEvent: Object { on: on(), off: off(), stopPropagation: stopPropagation()
, … }
​
DomUtil: Object { TRANSFORM: "transform", TRANSITION: "webkitTransition", TRANSITION_END: "webkitTransitionEnd", … }
​
Draggable: function NewClass()​
Evented: function NewClass()​
FeatureGroup: function NewClass()​
GeoJSON: function NewClass()​
GridLayer: function NewClass()​
Handler: function NewClass()​
Icon: function NewClass()​
ImageOverlay: function NewClass()​
LatLng: function LatLng()​
LatLngBounds: function LatLngBounds()​
Layer: function NewClass()​
LayerGroup: function NewClass()​
LineUtil: Object { simplify: simplify(), pointToSegmentDistance: pointToSegmentDistance(), closestPointOnSegment: closestPointOnSegment()
, … }
​
Map: function NewClass()​
Marker: function NewClass()​
Mixin: Object { Events: {…} }
​
Path: function NewClass()​
Point: function Point()​
PolyUtil: Object { clipPolygon: clipPolygon()
 }
​
Polygon: function NewClass()​
Polyline: function NewClass()​
Popup: function NewClass()​
PosAnimation: function NewClass()​
Projection: Object { LonLat: {…}, Mercator: {…}, SphericalMercator: {…} }
​
Rectangle: function NewClass()​
Renderer: function NewClass()​
SVG: function NewClass()​
SVGOverlay: function NewClass()
...

so L looks pretty defined to me!

I have tried moving declarations and import statements about, but to no avail. At this point, I'm lost and any help would be hugely welcome.

Answer 1

Solution:

import L from "leaflet";