React-id-swiper: Not working in ie11

[MMT-LD]

https://github.com/kidjp85/react-id-swiper/issues/273 - same issue as the closed post - kind of addresses the issue for webpack people but has anyone any idea how to get this to work with rollup? I have had to revert to an older version to get this working in ie11 😒

[kidjp85]

Hi @MMT-LD , which version of React-id-swiper are you using ? And how did you import the js file ?

[Antonio-Laguna]

Issue here is https://github.com/nolimits4web/swiper/issues/3073 as it's loading swiper without transpiling.

[MMT-LD]

Hi @MMT-LD , which version of React-id-swiper are you using ? And how did you import the js file ?

exactly like the comment above describes - sorry for late reply.

So, i import it the latest version. Export it give rollup my config with presets enabled and it does not bundle accordingly. This is because the main swiper library does not transpile the code above

[Antonio-Laguna]

I wonder @kidjp85 if you could export a version that imports the transpiled version of Swiper instead just so others can choose. As of right now, there's no fix except for tweaking the webpack config which is not always a possibility.

[MMT-LD]

I wonder @kidjp85 if you could export a version that imports the transpiled version of Swiper instead just so others can choose. As of right now, there's no fix except for tweaking the webpack config which is not always a possibility.

Agree, however not sure that will solve the issue. This is an idangerous specfic issue with the swiper library

[Antonio-Laguna]

Won't solve the issue itself but it doesn't seem like Swiper wants to. However it does give react-id-swiper consumers an option to circumvent that.

[MMT-LD]

Won't solve the issue itself but it doesn't seem like Swiper wants to. However it does give react-id-swiper consumers an option to circumvent that.

i see where your going with this 😄

[MMT-LD]

Any update on this... would really appreciate being able to upgrade.... 😄

[tohbansoon]

Hi guys, any findings to resolve this??
According to react-id-swiper document, I have added this into the webpack.config.js. I believe this is to use babel to include dom7 and swiper module and transpile it into es5 code

{
    test: /\.js(x)?$/,
    exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.jsx?$/],
    use: [{ loader: 'babel-loader' }],
},

But after npm run build, I can still find const syntax inside the .js file in dist folder... I can confirm the syntax is came from the swiper module

This cause old browser like safari9 or IE10 display error as below

SyntaxError: Use of const in strict mode.

[RyanGosden]

I've also hit the same wall. Tried including the swiper and dom7 modules to be transpiled but that did not work. Would be great if we could import swiper lib independently.

Update:
For anyone else using wepback and have babel 7x + and are having issues where swiper and dom7 are not being transpiled using:
exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.js(x)?$/]

Ensure your babel config file is programmatically created (babel.config.js and not a .babelrc file).

More info here

[jwilson114]

"Ensure your babel config file is programmatically created (babel.config.js and not a .babelrc file)." solved it for me! Thanks

[kidjp85]

There is another option I think you guys can try is building your own Swiper locally by changing Gulp config in Swiper's package and put it in your code base. More detail here

[liesahead]

@RyanGosden , thanks, that actually helped.