Swiper: Uncaught TypeError: Controller.LinearSpline is not a constructor

[xavianaxw]

This is a (multiple allowed):

• [x] bug
• [ ] enhancement
• [ ] feature-discussion (RFC)

• Swiper Version: 4.0.0
• Platform/Target and Browser Versions: Any

What you did

A simple thumbs-gallery

this.image = new Swiper(this.el.querySelector('.js-carousel-image'), {
   effect: 'slide',
   speed: 300,
   loop: false,
});

this.type = new Swiper(this.el.querySelector('.js-carousel-type'), {
   effect: 'slide',
   speed: 300,
   loop: false,
   navigation: {
      nextEl: this.controls.next,
      prevEl: this.controls.prev,
   },
});

this.image.controller.control = this.type;
this.type.controller.control = this.image;

Expected Behavior

Both swipers to be able to control the sliding of each other

Actual Behavior

Error thrown on Google Chrome Debugger

Uncaught TypeError: Controller.LinearSpline is not a constructor
    at Swiper$1.getInterpolateFunction (webpack-internal:///23:5029:9)
    at setControlledTranslate (webpack-internal:///23:5044:27)
    at Swiper$1.setTranslate (webpack-internal:///23:5071:7)
    at Swiper$1.setTranslate (webpack-internal:///23:5150:25)
    at self.eventsListeners.(anonymous function).forEach (webpack-internal:///23:300:24)
    at Array.forEach (<anonymous>)
    at eventsArray.forEach (webpack-internal:///23:299:37)
    at Array.forEach (<anonymous>)
    at Swiper$1.emit (webpack-internal:///23:297:17)
    at Swiper$1.setTranslate (webpack-internal:///23:940:10)

Not sure if this is a webpack issue or there needs to be some configuration with alias.

Any suggestions welcomed!

[daviddelusenet]

I'm also experiencing this error.

[rash2x]

the same problem.

[xavianaxw]

I'm on the same boat with @daviddelusenet Webpack 3 with Babel for ES5 compilation.

[nolimits4web]

Looks like problem in compiled code then (in Babel). I just checked it with Rollup + Buble all good. Can you please make just a Swiper compiled (with Webpack + Babel) code and post it here, or somewhere so i can check?

[nolimits4web]

As a workaround you can use UMD build (works with webpack) import Swiper from 'swiper/dist/js/swiper.js

[xavianaxw]

Hang on. Will do it for you soon-ish

[chenhaoact]

import Swiper from 'swiper/dist/js/swiper.js

it works，thank you @nolimits4web

[Uriziel01]

@nolimits4web Do you still need Swiper compiled by webpack+babel? I can do that for you if it will help to solve the issue.

[nolimits4web]

@Uriziel01 yes, will be helpful to see such issue live

[Uriziel01]

Indeed the problem seems to be in these two lines:

new Controller.LinearSpline(swiper.slidesGrid, c.slidesGrid) :
new Controller.LinearSpline(swiper.snapGrid, c.snapGrid);

Where in fact LinearSpline is just a method defined inside Controller const, simply removing the new from these lines fixes the issue temporarily.

I'll prepare live issue for you but in a few hours I can't do it right now.

swiper.chunk.js.zip

[Uriziel01]

@nolimits4web
I've tried creating jsfiddle demo for this issue but I'm not sure how I can use webpack imports there.
So I've created standalone issue reproduction and I'm attaching it below 😄

My main.js file code looks like this:

import Swiper from 'Swiper';

jQuery(function ($) {
        'use strict';

        window.swipers = [];
        $('.swiper-container').each(function (index) {
            let settings = {};
            window.swipers.push(new Swiper(this, settings));
        });
        for (let swiperKey in window.swipers) {
            let swiper = window.swipers[swiperKey];
            let swipers = window.swipers.slice();
            swipers.splice(parseInt(swiperKey), 1);
            if (swipers.length > 0) {
                swiper.controller.control = swipers;
            }
        }
    },
    jQuery
);

Just open the page and try to mouse move any Swiper.
swiper #2239.zip

P.S. - Sorry for the huge vendor.js file but it is pulled out straight from a large project. ponteus.js file contains all the swiper code and the main code that launches it.

[nolimits4web]

@Uriziel01 thanks, i've fixed it, fix will arrive in next release. But anyway, it is still recommended to run Babel/Buble over swiper esm packages. In this case you won't have this error

[jeff-fe]

@chenhaoact 你好，想请教一下，你的问题是怎么解决的？

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.