'[laravel][npm] I can't use swiper error Uncaught TypeError: Swiper is not a constructor

Today I try swiper but not working.

I install Swiper with npm

npm install swiper

this is my code

index.blade.php

<div class="swiper-container">
    <div class="swiper-wrapper">

        <div class="swiper-slide">
            <div class="card">
                <img src="..."
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <div class="card-text">
                        <h5 class="float-left"><b>Phi Phi Island</b></h5>
                        <h6 class="float-right">Id : 12001</h6>
                        <br><br>
                        <p>This is a wider card with supporting text below as a natural
                            lead-in to
                            additional content. This content is a little bit longer.</p>
                        <hr>
                        <div>
                            <div class="float-left">Adult</div>
                            <div class="float-right">200</div>
                            <br>
                            <div class="float-left">Child</div>
                            <div class="float-right">100</div>
                            <br>
                            <div class="float-left">Infant</div>
                            <div class="float-right">0</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button type="button" class="btn btn-outline-danger">See detail
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</div>

This is script

$(document).ready(function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 3,
                spaceBetween: 30,
   });
});

app.js 

window.Swiper = require('swiper');

app.scss

@import "~swiper/swiper.scss";

So I run npm run dev already.

result is

VM3130 app.js:31708 Uncaught TypeError: Swiper is not a constructor
    at HTMLDocument.<anonymous> ((index):556)
    at mightThrow (VM3130 app.js:31415)
    at process (VM3130 app.js:31483)

I code follow swiperjs.com but not working, please help me!!

laravelswiper


Solution 1:[1]

My solution

in app.js

window.Swiper = require('swiper/js/swiper');

Solution 2:[2]

window.Swiper = require('swiper/swiper-bundle');

should be like this in resources app

Solution 3:[3]

I believe there are an infinite number of ways to do it. But I'll show you how I do it.

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    // add these 2 lines
    .js('node_modules/swiper/swiper-bundle.js', 'public/js')
    .postCss('node_modules/swiper/swiper-bundle.min.css', 'public/css')
    // end
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

Save your changes and update your node_modules directory

npm run dev

Then you have to import it:

<link href="{{ asset('css/swiper-bundle.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/swiper-bundle.js') }}"></script>

Solution 4:[4]

For Laravel v9.x and swiperjs v8.x I've found the solution to install swiperjs properly.

Here is the answer

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 story ks
Solution 2 subo
Solution 3 Ricardinho
Solution 4 Hooman

Related Questions