Vue-awesome-swiper: version 4.0.4 issue with IE

[pfasang]

Vue.js version and component version

"vue-awesome-swiper": 4.0.4
"vue": "2.6.11",
"swiper": "5.3.6"

Steps to reproduce

Hi, newest version of vue-awesome-swiper is not working on IE. I am using webpack with _vue-loader_ and _babel-loader_.
Also in my app.js importing these two lines for correct transpiling JS

import "core-js/stable";
import "regenerator-runtime/runtime";

and importing plugin globally:

import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

IE shows Syntax error. I am not sure, if it is issue of webpack compiling or plugin issue. Previous version works fine. I noticed, that vue components are written in TS. Do I need to change my webpack conf.?

Webpack file:

'use strict';

const path = require("path");
const {VueLoaderPlugin} = require("vue-loader");
const TerserPlugin = require('terser-webpack-plugin');
const sortCSSmq = require('sort-css-media-queries');
const CompileTimePlugin = require('webpack-compile-time-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const resourcesPath = "xxx/xxx/xxx/xxx/xxx";

module.exports = {
    name: 'default',
    mode: 'development',
    entry: {
        app: `./${resourcesPath}/xxx/Vue/app.js`,
        critical: `./${resourcesPath}/xxx/Js/critical.js`,
    },
    output: {
        chunkFilename: 'chunks/dev/[id].[contenthash].js',
        filename: '[name].js',
        path: path.resolve(__dirname, `${resourcesPath}/Public/Js`),
        publicPath: `/xxx/xxx/xxx/xxx/Public/Js/`
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
                parallel: true,
            })
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [
                'chunks/dev/*'
            ]
        }),
        new VueLoaderPlugin(),
        new CompileTimePlugin()
    ],
    watch: true,
    watchOptions: {
        ignored: /node_modules/
    }
};

Can you help me pls?

[surmon-china]

@pfasang I suggest showing the specific syntax error with IE.

[surmon-china]

@pfasang

In addition, the author of Swiper has stated that Swiper5 does not support IE.
If you need to support IE operation, you can fall back to Swiper to 4.x version.
vue-awesome-swiper 4.x is compatible with Swiper4/5.

[pfasang]

Thanks for advice. I will downgrade _vue-awesome-swiper_ to previous version, because is better optimized for now.

Also Swiper v4 doesn't support IE, see: https://github.com/nolimits4web/swiper/issues/3285

[TongjieYang]

@pfasang when you can babel, you can add swiper and dom 7 , it work in ie11
you can configure in vue.config.js as follows:
transpileDependencies: [/vue-baidu-map/,/vue-awesome-swiper/,/swiper/,/dom7/]

[surmon-china]

https://github.com/surmon-china/vue-awesome-swiper/issues/499#issuecomment-620484133