Swiper: IE11 SCRIPT1002 error

[helabenkhalfallah]

Hello I have an issue on IE :
SCRIPT1002: Syntax error

eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__ = __webpack_require__(192);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_ssr_window__ = __webpack_require__(31);\n/**\n * Swiper 4.5.1\n * Most modern mobile touch slider and framework with hardware accelerated transitions\n * http://www.idangero.us/swiper/\n *\n * Copyright 2014-2019 Vladimir Kharlampidi\n *\n * Released under the MIT License\n *\n * Released on: September 13, 2019\n */\n\n\n\n\nconst Methods = {\n addClass: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"c\" /* addClass */],\n removeClass: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"E\" /* removeClass */],\n hasClass: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"m\" /* hasClass */],\n toggleClass: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"H\" /* toggleClass */],\n attr: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"e\" /* attr */],\n removeAttr: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"D\" /* removeAttr */],\n data: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"i\" /* data */],\n transform: __WEBPACK_IMPORTED_MODULE_0_dom7_dist_dom7_modular__[\"I\" /* transform */],\n transition:

I use the version 4.0.0 with webpack 3.
I add this to my webpack conf :

config.module.rules.push({
    test: /\.js$/,
    loader: "babel-loader",
    exclude:  /(node_modules\/(?!swiper)|bower_components)/
});

To babel transpile swiper but the same issue.

Babelrc :

{
    "presets":
        [
            "es2015"
        ],
    "plugins": [
        ["transform-es2015-modules-commonjs", {
            "allowTopLevelThis": true,
            "strict": true,
            "loose": true
        }]
    ]
}

Have you an idea ?
Thank you :)

[nolimits4web]

Version 4 is not supported anymore

[helabenkhalfallah]

Version 4 is not supported anymore

Hello @nolimits4web even with 5.1.0 I have the same issue :/ I tried now.

[nolimits4web]

5.x doesn't support IE

[helabenkhalfallah]

5.x doesn't support IE

OK, what version should I use to support IE ?

[helabenkhalfallah]

If I use "swiper": "=v3.4.2" I get IE work, thanks.

[TongjieYang]

@helabenkhalfallah when you can babel, you can add swiper and dom 7 , it work in ie11

[AnonymousArthur]

@TongjieYang Hey bro, I'm working on a project created by Vue CLI (swiper 5.x installed), but adding swiper to vue config's transpileDependencies didn't make the esm.bundle.js go through Babel. Do you know how to resolve this issue?

[dangelion]

Same problem here. On IE 11 I get SCRIPT1002: Syntax error when import Swiper 5.4.5 import Swiper from 'swiper';.
It's in a Vue 2.6.11 context, I don't know if that's the problem. Someone can help me?

[Constaline]

Same problem here. On IE 11 I get SCRIPT1002: Syntax error when import Swiper 5.4.5 import Swiper from 'swiper';.
It's in a Vue 2.6.11 context, I don't know if that's the problem. Someone can help me?

https://github.com/surmon-china/vue-awesome-swiper/issues/620#issuecomment-610793027

[darshanags]

I've got this running. My config is as follows:

package.json dependencies:

"dependencies": {
        "core-js": "^3.6.5",
        "swiper": "^6.3.1"
    },
    "devDependencies": {
        "@babel/core": "^7.11.6",
        "@babel/preset-env": "^7.11.5",
        "babel-loader": "^8.1.0",
        "webpack": "^4.44.2",
        "webpack-cli": "^3.3.12"
    }

webpack.config.js:

const path = require("path");

const config = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules\/(?!(swiper|dom7)\/).*/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            [
                                "@babel/preset-env",
                                {
                                    useBuiltIns: "usage",
                                    corejs: { version: "3.6.5", proposals: true },
                                },
                            ],
                        ],
                    },
                },
            },
        ],
    },
};

module.exports = config;