CODEWITHSUNDEEP
vue.js
El Hombre Sin Nombre
El Hombre Sin Nombre

Reputation: 3092

Vue - Cannot use import statement outside a module

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.

Upvotes: 12

Views: 64194

Answers (4)

Michee Ngoyi
Michee Ngoyi

Reputation: 1

Hello encountered the same issue in laravel 9 with vue3 js and vite

  • the solution you have to configure your .env because when you run => npm run build, it create the build folder where your js, images , css will be compile, those files will be used in your App

  • Go in .env and Add this code: ASSET_URL=http://localhost/public

  • Now if you run build, all object will be prefix by //localhost/public =>Ex. http://localhost/public/build/js/app1332527.js

Upvotes: 0

gondwe
gondwe

Reputation: 101

require('__path_to_vue.js__')

If you intend to use it outside module

Upvotes: -1

Nysso
Nysso

Reputation: 435

I removed defer from

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

and it worked perfectly

Upvotes: -2

nanobar
nanobar

Reputation: 66365

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.

Upvotes: 5

Related Questions