I have a Vue 2 sample project at https://github.com/ericg-vue-questions/leaflet-test
This is a simple import issue for my code that I am not sure how to handle.
A couple of things I have tried are to modify the code to do:
<script>
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import * from 'leaflet-polylinedecorator';
but this results in a build error:
10:9 error Parsing error: Unexpected token, expected "as"
> 4 | import * from 'leaflet-polylinedecorator';
To the index.html, I also tried adding:
<script src="../node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js"></script>
but that results in the runtime error:
Uncaught SyntaxError: Unexpected token '<' (at leaflet.polylineDecorator.js:1:1)
What needs to be changed so I can import and use this leaflet extension with a vue app?
A solution I found was to modify main.js so it looks like:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
require( "../node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js" );
new Vue({
render: h => h(App),
}).$mount('#app')
Adding the require resolved the problem.
I would be interested in alternative solutions, if there are any.