swiperjs es module build doesn't work in IE11 browser

user_12667595 0
Viewed 1714

I am using webpack with babel to transpile modules and after adding swiper npm package to the build, IE11 browser stopped working because dom7 dependency is not transpiled properly. This is pointed out on the swiper's get started page, however it is not clear what has to be done to fix the problem.

dom7 webpack-4 babeljs swiper.js
2 Answers

After couple days of research and multiple attempts, I've finally got it working.

Important thing to note is that you must use babel.config.js instead of .babelrc so that node_modules could be included into build.

The final configuration:

babel.config.js (relevant section only):

module.exports = {
  "presets": [
    ["@babel/env", {
      "targets": {
        "ie": "11"
      }
    }],...

webpack.config.js (relevant section only):

test: /\.js$/,
exclude: /node_modules\/(?!(swiper|dom7)\/).*/,
rules: [
   {
     use: [{
       loader: 'babel-loader',
       options: {
         cacheDirectory: true,
         babelrc: false,
         rootMode: 'upward'
       }
     }]
   }
 ]

Here is the article which got me to the right direction (see comment from RyanGosden) - https://www.bountysource.com/issues/79144083-not-working-in-ie11

Hope that helps other people to save some time!

user_126675950

Update in 2022:

Previous answer was correct, but swiper 7 adds a new esm dependency named ssr-window. So it needs to be added as below:

webpack.config.js (relevant section only):

test: /\.js$/,
exclude: /node_modules\/(?!(swiper|dom7|ssr-window)\/).*/,
rules: [
   {
     use: [{
       loader: 'babel-loader',
       options: {
         cacheDirectory: true,
         babelrc: false,
         rootMode: 'upward'
       }
     }]
   }
 ]
user_183838940
Related