"Uncaught SyntaxError: import declarations may only appear at top level of a module" while importing Swiper

Question

I'm using swiper to create slider but the buttons ain't working. I tried to change the web browser but nothing changed.

The file extension is .php and I'm using xammp

this is my code:

js:

var swiper = new Swiper('.home-slider', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },  
  });

html:

<secton class="home">

    <div class="swiper home-slider">
        <div class="swiper-wrapper">

            <div class="swiper-slide slide" style="background:url(1.png) no-repeat">
                <div class="content">
                    <a href="package.php" class="btn">Réserver</a>
                </div>
            </div>

            <div class="swiper-slide slide" style="background:url(3.png) no-repeat">
                <div class="content">
                    <a href="package.php" class="btn">Réserver</a>
                </div>
            </div>

            <div class="swiper-slide slide" style="background:url(3.png) no-repeat">
                <div class="content">
                    <a href="package.php" class="btn">Réserver</a>
                </div>
            </div>

        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

</section>

I tried:

import Swiper, { Navigation } from 'swiper';

Swiper.use([Navigation]);

and:

import SwiperCore, { Navigation } from 'swiper';
SwiperCore.use([Navigation]);

I used dev-tools and the console show:

Uncaught ReferenceError: Swiper is not defined
    <anonymous> http://localhost/website/script.js

after I added :

import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);

it becomes:

Uncaught SyntaxError: import declarations may only appear at top level of a module