0

I'm making a website using Javascript and Vue.js and found a plugin for making a 3d carousel https://www.bestjquery.com/?ynVfL3CE,but when i import these i get the error "Uncaught SyntaxError: Cannot use import statement outside a module".My code below.

<html>
<head>
<script src="js/vue.js"></script>
<script src="js/carousel.js"></script>
</head>
<body>
      <div id="example">
          <carousel-3d :autoplay="true" :autoplay-timeout="5000" :display="3">
              <slide v-for="(slide, i) in slides" :index="i">
              <span class="title">You know</span>
                   <p>You know, being a test pilot isn't always the healthiest business in the world.</p>
              </slide>
          </carousel-3d>
      </div>
  <script>    
    new Vue({
      el: '#example',
      data: {
      slides: 7
      },
    components: {
      'carousel-3d': Carousel3d.Carousel3d,
      'slide': Carousel3d.Slide
      }
    })
  </script>

Code from carousel.js

import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);
Victor Paim
  • 1
  • 1
  • Does this answer your question? ["Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ES6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) – user254694 Jan 29 '20 at 18:35

1 Answers1

0

try the updated module syntax https://jakearchibald.com/2017/es-modules-in-browsers/:

<script type="module" src="js/carousel.js"></script>
Kyle
  • 1,463
  • 1
  • 12
  • 18
  • i did it and got this error "Access to script at 'file:///C:/Users/Pedro/Desktop/projeto2/fellsky/js/carousel.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." – Victor Paim Jan 29 '20 at 19:43
  • @VictorPaim That just means you can't load via a local file, but will need to use a server to provide those assets. – Phix Jan 29 '20 at 20:23
  • I hosted it via npm serve and got "Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../"." – Victor Paim Jan 29 '20 at 21:58
  • it's a webpack thing - this is the route we were headed: https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue – Kyle Jan 30 '20 at 04:17