I am facing an issue on my page where I am loading certain JavaScript files. The files being loaded are:
- Vue.js
- app.js
The app.js file has been compiled using webpack and includes a NPM component from @chenfengyuan/vue-countdown.
My goal is to display a Vue.js countdown component on the page by using the following code snippet:
<div class="container" id="app">
<vue-countdown :time="2 * 24 * 60 * 60 * 1000" v-slot="{ days, hours, minutes, seconds }">
Time Remaining: @{{ days }} days, @{{ hours }} hours, @{{ minutes }} minutes, @{{ seconds }} seconds.
</vue-countdown>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/app.js"></script>
<script src="https://js.pusher.com/7.0/pusher.min.js"></script>
<script>
import VueCountdown from '@chenfengyuan/vue-countdown';
// Vue application
const app = new Vue({
el: '#app',
data: {
messages: [],
},
});
app.component(VueCountdown.name, VueCountdown);
</script>
Upon running this code, I encounter a JavaScript error that states:
Uncaught SyntaxError: Cannot use import statement outside a module
I need assistance in understanding what mistake I have made and how I can rectify it for correct importing of the module.