SwiperJS w/ SyntaxError：无法在模块错误之外使用导入语句

Question

I can't seem to figure out what is causing this error, so I will go into more detail below on what I have done and if anyone can spot anything off, let me know.

---

Here is the error that I am getting :

Uncaught SyntaxError: Cannot use import statement outside a module

---

Here is everything that I have done :

Here is the package.json :

{
  "scripts": {
    "imagemin": "imagemin src/images/* -p --out-dir=dist/images",
    "start": "gulp style & gulp scripts"
  },
  "devDependencies": {
    "bulma": "^0.9.3",
    "gulp": "^4.0.2",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^5.1.0",
    "gulp-uglify": "^3.0.2",
    "gulp-uncomment": "^0.3.0",
    "imagemin-cli": "^7.0.0",
    "node-sass": "^7.0.1",
    "rough-notation": "^0.5.1",
    "sass": "^1.47.0",
    "swiper": "^7.4.1",
    "three": "^0.122.0",
    "vanta": "^0.5.21"
  }
}

Here is me enqueuing the node_modules swiperjs:

wp_register_script(
    'Swiper',
    get_template_directory_uri() . '/node_modules/swiper/swiper-bundle.min.js',
    null, null, true
);
wp_enqueue_script('Swiper');

I switched over the script to support the type="module" on SwiperJS:

Here is my swiper.js file that gets compacted into main.min.js :

document.addEventListener('DOMContentLoaded', function() {

    import Swiper, { Navigation, Pagination } from 'swiper';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import 'swiper/css/pagination';

    Swiper.use([Navigation, Pagination]);

    new Swiper(".mySwiper", {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
});

Here is the final output which is enqueued and minified:

document.addEventListener("DOMContentLoaded",()=>{const e=Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"),0);0<e.length&&e.forEach(o=>{o.addEventListener("click",()=>{var e=o.dataset.target;const t=document.getElementById(e);o.classList.toggle("is-active"),t.classList.toggle("is-active")})})}),document.addEventListener("DOMContentLoaded",function(){import e,{Navigation as t,Pagination as o}from"swiper";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";e.use([t,o]),new e(".mySwiper",{direction:"vertical",slidesPerView:1,spaceBetween:30,mousewheel:!0,pagination:{el:".swiper-pagination",clickable:!0}})}),document.addEventListener("DOMContentLoaded",function(){VANTA.BIRDS({el:"#main-hero",mouseControls:!0,touchControls:!0,gyroControls:!1,minHeight:200,minWidth:200,scale:1,scaleMobile:1,colorMode:"lerpGradient",color1:2829099,quantity:3,backgroundColor:16251129,birdSize:1.5})});

Does anyone know what might be happening?

Answer 1

I believe that you don't need to import separate parts of the Swiper if you are using the bundled build of Swiper. So, just try the same code without import statements and Swiper.use statement.

Also, don't forget that in the default initialization, it might be helpful to enqueue the Swiper style file to have a default appearance.

If you want to use only the required parts of Swiper, you should include the source file in your source files, not just enqueueing the already built file that is located in the Generatepress.