swiper.jsで最新バージョンにした時のエラー
Discussion
解決したいこと
swiper.jsで最新バージョンにした時のエラー
発生している問題・エラー
ERROR in ./resources/js/swiper.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/miyanakayoshiaki/Desktop/laravel/umarche/resources/js/swiper.js: Identifier 'Swiper' has already been declared. (7:7)
該当するソースコード
Javascript
解決方法
①バージョンをnpm install swiper@6.7.0にする
②Identifier 'Swiper' has already been declared. (7:7)
と書いてあるので
resouses/js/swiper.jsのSwiperの宣言を下記のように変更したらインストールができました。
旧)const swiper = new Swiper
新)const swiper = new SwiperCore
// import Swiper JS
import Swiper from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';
// core version + navigation, pagination modules:
import SwiperCore, { Navigation, Pagination } from 'swiper/core';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new SwiperCore('.swiper-container', {
// Optional parameters
//direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
});
0
- import Swiper from 'swiper';
- import SwiperCore, { Navigation, Pagination } from 'swiper/core';
+ import Swiper, { Navigation, Pagination } from 'swiper';
0Like