swiperjs es module build doesn't work in IE11 browser

Question

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.

Answer 1

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!

Answer 2

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'
       }
     }]
   }
 ]