Vue2leaflet: build error Cannot find namespace 'L'

[vkiller178]

Description

hello everyone
i use [email protected] & typescript template
but i got a build error

Steps to Reproduce

just execyarn build

Expected Results

No error is throw

Actual Results

[DonNicoJs]

@HIMISOCOOL Can you help here ?

[HIMISOCOOL]

@lordfuoco Id have to install yarn and see if its reproducible that way, if @Xixi20160512 has just installed the package it should work as it is from npm cause its a dependency of this package, but it looks like you don't have @types/leaflet installed.

[dewey]

I just installed it via npm too and also had to manually install @types/leaflet.

[HIMISOCOOL]

@dewey thanks for letting me know, I have this in a project and haven't needed to do this so obviously I need to check it in isolation

[vkiller178]

@HIMISOCOOL hi, like @dewey I had manually install @types/leaflet too, but I got the same error.

[HIMISOCOOL]

@Xixi20160512 thanks for the heads up, I have just reproduced the issue. Its odd that my project at work doesnt encounter this issue

[JimmyBastos]

Any update on this? I'm using the very same setup of @Xixi20160512. I also installed @types/leaflet, but the error persists.

UPDATE:
I solved this by adding a /types/vue2-leaflet.d.ts file to my project...

declare module 'vue2-leaflet' {
    import * as  L from 'leaflet'
    export { L }
}

[HIMISOCOOL]

@JimmyBastos yep thats the quickest way to fix it. the code in master should not have the issue.

[DonNicoJs]

Closing this, since 2.0 does not export L at all anymore

[neXorianus]

i'm useing "vue2-leaflet": "^2.1.1", and still getting the types error (on vue-cli-service serve).

I had to install @types/leaflet and include @JimmyBastos 's declare ... file (https://github.com/KoRiGaN/Vue2Leaflet/issues/291#issuecomment-460058926) to get it running again.

[backmeupplz]

Same on 2.2.1 — had to install the types and use the declare thing.

[vinerich]

Still an issue in [email protected].
Not that experienced with types. For me adding the file didn't work, but adding the lines in types/index.d.ts solved it for me.

[MexsonFernandes]

https://github.com/vue-leaflet/Vue2Leaflet/issues/87#issuecomment-336560312

First,
import L from 'leaflet';

then import rest modules.

[kryz81]

I can confirm the fix: you need to manually install types: npm i -D @types/leaflet

[seisenreich]

#87 (comment)

First,
import L from 'leaflet';

then import rest modules.

When I do this I get another eslint error:
L error 'L' is defined but never used no-unused-vars.

Having this code:

import Vue from "vue";
import L from "leaflet";
import { LMap, LTileLayer, LMarker } from "vue2-leaflet";
import "leaflet/dist/leaflet.css";

export default Vue.extend({
  components: {
    "l-map": LMap,
    "l-tile-layer": LTileLayer,
    "l-marker": LMarker,
  },
});

Edit: Adding the types/vue2-leaflet.d.ts file as suggested by @JimmyBastos did the trick for me.

[Krzem0]

Hello,
FYI, today i had the same issue in my TypeScript project and most like @seisenreich, I've added shims-vue2-leaflet.d.ts with declare module 'vue2-leaflet' { import * as L from 'leaflet' export { L } } and then had to rebuild the project with npm.
Now it's working.

[DonNicoJs]

@Krzem0 @seisenreich should we add a FAQ section to the docs? would you be happy to add it?