Importing vue component into my page Uncaught Exception

I have a page which loads the following JS files

  • Vue.js
  • app.js

The app.js file is compiled using webpack, this includes a NPM component from @chenfengyuan/vue-countdown.

I am trying to display a vue.js countdown component on my page using the following code on my page:

<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>

When I run this I get a JS error saying:

Uncaught SyntaxError: Cannot use import statement outside a module

Can someone explain what I am doing wrong and how I can correctly import this?