0

I'm new to jQuery and I want to import Swiper but it doesn't work, what's the problem? I copy and paste from main source but I don't know the problem.

i get the following error: "Uncaught SyntaxError: import declarations may only appear at top level of a module"

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
import Swiper from 'swiper/bundle';
$(function () {
    const timelineSwiper = new Swiper ('.timeline .swiper-container', {
        direction: 'vertical',
        loop: false,
        speed: 1599,
        pagination: '.swiper-pagination',
        paginationBulletRender: function (swiper, index, className){
            var year = document.querySelectorAll('.swiper-slide')
            [index].getAttribute('date-year');
            return '<span class="' +className + '">' + year + '</span>';
        },
        paginationClickable:true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        breakpoint: {
            778: {
                direction: 'horizontal',
            }
        }
    });
});
P...
  • 17
  • 4
  • You're likely getting errors in your console. Please share those. – Heretic Monkey Dec 02 '20 at 18:13
  • Have you run npm install swiper? – James Hamann Dec 02 '20 at 18:20
  • @HereticMonkey "Uncaught SyntaxError: import declarations may only appear at top level of a module" this is the error. i don't know how to fix because that's the full code and imports are at top of it in my knowledge. – P... Dec 02 '20 at 18:57
  • @JamesHamann yes installed it with npm. – P... Dec 02 '20 at 18:58
  • Please [edit] your question to include any errors you are receiving. Also, please search the site for those errors. There are likely many questions about that error that would be helpful. – Heretic Monkey Dec 02 '20 at 18:59
  • Could it be you are importing Swiper twice? I see nothing in the docs that say to import it the way you are. https://swiperjs.com/get-started/ – James Hamann Dec 02 '20 at 19:26
  • @HereticMonkey eddited and searched, couldnt fix my problem. – P... Dec 02 '20 at 19:50
  • @JamesHamann i tried both importing ways separately and didn't work. – P... Dec 02 '20 at 19:53
  • So you have that script in a ` – Heretic Monkey Dec 02 '20 at 19:54
  • 1
    Does this answer your question? [ES2015 import doesn't work (even at top-level) in Firefox](https://stackoverflow.com/questions/37624819/es2015-import-doesnt-work-even-at-top-level-in-firefox) – Heretic Monkey Dec 02 '20 at 19:55
  • @HereticMonkey i added type = "module" to my script and dom.moduleScripts.enabled was true already, also i used ./ at the beginning of my module name but it didnt work and i get these errors: "ross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///D:/file/Web%20dev/html%20&%20css/8/8js.js. (Reason: CORS request not http)." and "odule source URI is not allowed in this document: “file:///D:/file/Web%20dev/html%20&%20css/8/8js.js”." this is getting confusing. – P... Dec 02 '20 at 21:01
  • Apparently you're running from the file system rather than an actual web server. I suggest taking some time to set up a simple web server and run your code that way; it's how code like this is engineered to be run. There are a number of tutorials and products out there that can help get you going. – Heretic Monkey Dec 03 '20 at 13:00

0 Answers0