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?
Advertisement
Answer
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.