Vue - Cannot use import statement outside a module

Question

I´m trying to create a form. This form have a package.json with vue, axios and sweetalert.

  "dependencies": {
    "axios": "^0.19.0",
    "vue": "^2.6.10",
    "vue-sweetalert2": "^2.1.1"
  }

The JS is

  <script>
        import Vue from 'vue';
        import VueSweetalert2 from 'vue-sweetalert2';
        import VueAxios from 'vue-axios'
        import axios from 'axios'
        import 'sweetalert2/dist/sweetalert2.min.css';
        Vue.use(VueSweetalert2, VueAxios, axios)
        var app = new Vue({
            el: '#app',
            methods: {
                guardar: function () {
                    axios
                        .get('ENDPONT')
                        .then(response => {
                            console.log(response);
                            Vue.swal('Hello Vue world!!!');

                        })
                        .catch(function (error) {
                            console.log(error);
                            Vue.swal('Hello Vue world!!!');

                        })
                },
            }
        })
    </script>

The error is simple: Return 'Cannot use import statement outside a module'. I suppose that import is wrong, but im new in Vue and don't know what is the right way.

Answer 1

You're trying to use an import statement in a normal script tag, you can only do that with type="module" but I suspect you will run into many other issues if you continue down this path as many libraries are not built for use with ESM modules yet.

You'll be better off generating a project with https://cli.vuejs.org/ which will create a good starting base and compile your code and put it in a /build folder for you to deploy to your web hosting.

Answer 2

require('__path_to_vue.js__')

If you intend to use it outside module

Answer 3

I removed defer from

<script src="{{ asset('js/app.js') }}" defer></script>

and it worked perfectly