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:
JavaScript
x
5
1
<script>
2
import "leaflet/dist/leaflet.css";
3
import L from "leaflet";
4
import * from 'leaflet-polylinedecorator';
5
but this results in a build error:
JavaScript
1
3
1
10:9 error Parsing error: Unexpected token, expected "as"
2
> 4 | import * from 'leaflet-polylinedecorator';
3
To the index.html, I also tried adding:
JavaScript
1
2
1
<script src="../node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js"></script>
2
but that results in the runtime error:
JavaScript
1
2
1
Uncaught SyntaxError: Unexpected token '<' (at leaflet.polylineDecorator.js:1:1)
2
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:
JavaScript
1
11
11
1
import Vue from 'vue'
2
import App from './App.vue'
3
4
Vue.config.productionTip = false
5
6
require( "../node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js" );
7
8
new Vue({
9
render: h => h(App),
10
}).$mount('#app')
11
Adding the require
resolved the problem.
I would be interested in alternative solutions, if there are any.