intermediate value Error

[jariesdev]

I got this ff. error:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value)(intermediate value)(...) is not a function at Object. (Vue2LeafletHotline.js:1) at e (Vue2LeafletHotline.js:1) at Object. (Vue2LeafletHotline.js:1) at e (Vue2LeafletHotline.js:1) at Object. (Vue2LeafletHotline.js:1) at e (Vue2LeafletHotline.js:1) at Vue2LeafletHotline.js:1 at Vue2LeafletHotline.js:1 at render (Vue2LeafletHotline.js:1) at Object.render (Vue2LeafletHotline.js:1)

Code:

[DavidXenakis]

I'm also getting the same issue. Using Typescript and Vuex. import Vue2LeafletHotline from 'vue2-leaflet-hotline'; @Component({ components: { Vue2LeafletHotline, }, }) This gives the error: TypeError: (intermediate value)(...) is not a function

[dilawar]

Same here.

[m-kant]

Same error. Using Typescript and Vuex too

[m-kant]

I've forced it to work, but it is a some kind of dirty trick, 'cos I've changed Vue2LeafletHotline code. Because recipe of original leaflet-hotline plugin to import does not work. vue2-leaflet-hotline is following this recipe and fails.

1. import vue file - import LHotline from 'vue2-leaflet-hotline/**Vue2LeafletHotline.vue**';
2. in this file change

   import L from 'leaflet';
   import { findRealParent, propsBinder } from 'vue2-leaflet';
   import Hotline from 'leaflet-hotline';
   Hotline(L)

   to

   import { findRealParent, propsBinder } from 'vue2-leaflet';
   import L from 'leaflet-hotline';

   TypeScript quirks If you are using typescript, you can get a conflict with typings. This is because in vue2-leaflet-hotline can be embedded folder node_modules/vue2-leaflet. Just remove node_modules inside vue2-leaflet-hotline

[vadim-popa]

Same error.

My code in main.js

import 'babel-polyfill'
import Vue from 'vue' import App from './App.vue' import vuetify from './plugins/vuetify'; import VueRouter from 'vue-router'
import router from './routes'
import VuePageTitle from 'vue-page-title' import { LMap, LTileLayer, LMarker, LCircleMarker, LPolyline } from 'vue2-leaflet'; import { Icon } from 'leaflet'; import 'leaflet/dist/leaflet.css'; import Vue2LeafletHotline from 'vue2-leaflet-hotline';

Vue.component('l-map', LMap); Vue.component('l-tile-layer', LTileLayer); Vue.component('l-marker', LMarker); Vue.component('l-circle-marker', LCircleMarker); Vue.component('l-polyline', LPolyline) Vue.component('v-hotline', Vue2LeafletHotline);

Vue.use(VuePageTitle, { router }) Vue.use(VueRouter) Vue.config.productionTip = false

delete Icon.Default.prototype._getIconUrl;

Icon.Default.mergeOptions({ iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), iconUrl: require('leaflet/dist/images/marker-icon.png'), shadowUrl: require('leaflet/dist/images/marker-shadow.png') });

new Vue({ vuetify, render: h => h(App), router:router }).$mount('#app')

[webistomin]

@ikmolbo any updates? Same issue

[reksc]

Same here

[fadighattas100]

same here any solution ?

[fadighattas100]

@m-kant , i did what you suggest to do but still the line is not showing up any help?

after i did what @m-kant did be carful to use the component as

<template>
<LHotline :latLngs="polyline" :outlineWidth="1" :palette="{0.0: '#008800', 0.5: '#ffff00', 1.0: '#ff0000' }" :min="150" :max="350"></LHotline>
</template>

<script>
 import LHotline from 'vue2-leaflet-hotline/Vue2LeafletHotline';

 export default {
        name: "GeoMap",
        components: {
            LHotline
        },
}
</script>

also i forked this repo and fixed this issue

and made some online demo