Sage 9 doesn't seems to work with Swiper 5

michel.slash.studio · February 28, 2020, 4:07pm

Hi there, im really beginner with Sage 9 and id like to install Swiper.js as a third party JavaScript. It dosen’t seems to work with the latest version of Sage 9.0.9, or maybe i did not installed it correctly.
I just buy the Theme Development with Sage eBook and i didn’t found a solution across the web or the eBook as well! i thought that maybe the error is something to do with eslint…

My error is always :
(Google Chrome) Uncaught ReferenceError: Swiper is not defined
(Safari) ReferenceError: Can’t find variable: Swiper

I use :

Bedrrocks 1.13.1
Sage 9.0.9
Swiper 5.3.1 https://swiperjs.com/

Here’s what i did for my homepage exemple :
I installed Swiper with ‘yarn add swiper’;
I called the import Swiper from ‘swiper’; it in /my-theme/ressources/assets/scripts/main.js just after import ‘jquery’;
I’ve added module > rules > exclude (on line 55) :
exclude: [/node_modules( ?![/|\] (bootstrap | foundation-sites | dom7 | ssr-window | swiper ))/],

I called the init Swiper in the routes/home.js in the init() (because my swiper is only in my homepage).

/* eslint-disable */
		var mySwiper = new Swiper('.swiper-container', {
			slidesPerView: 4,
			spaceBetween: 30,
			centeredSlides: true,
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
			},
		});
		/* eslint-enable */

I disable eslint here because i had another similar error :
7:8 error ‘mySwiper’ is assigned a value but never used no-unused-vars
7:23 error ‘Swiper’ is not defined no-undef

Please, i need your help @roots Team !
Thanks

huubl · February 29, 2020, 6:04pm

Try to add it to:

externals: {
 jquery: 'jQuery',
},

github.com

roots/sage/blob/master/resources/assets/build/webpack.config.js

'use strict'; // eslint-disable-line

const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CopyGlobsPlugin = require('copy-globs-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

const desire = require('./util/desire');
const config = require('./config');

const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';

let webpackConfig = {
  context: config.paths.assets,
  entry: config.entry,
  devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
  output: {

This file has been truncated. show original

Or add:

window.swiper = swiper;

michel.slash.studio · February 29, 2020, 9:37pm

Thanks @huubl i did add as you said so and it works !
externals: {
jquery: ‘jQuery’,
Swiper: ‘swiper’,
},

Apparently, i have to import Swiper and initialize in the same file, other else, it wont work.

// Import Swiper.js
// import Swiper from 'swiper';
import { Swiper, Navigation, Pagination, Scrollbar, EffectCoverflow } from 'swiper/js/swiper.esm';
Swiper.use([Navigation, Pagination, Scrollbar, EffectCoverflow]);
// window.swiper = Swiper;

$(document).ready(function() {
/* eslint-disable */
var swiper = new Swiper('.swiper-container', {
	slidesPerView: 4,
	spaceBetween: 30,
	centeredSlides: true,
	pagination: {
		el: '.swiper-pagination',
		clickable: true,
	},
});
/* eslint-enable */
});

Thanks for your help

system · April 10, 2020, 4:07pm

This topic was automatically closed after 42 days. New replies are no longer allowed.