[SOLVED] swiperjs es module build doesn't work in IE11 browser

swiperjs es module build doesn't work in IE11 browser

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.

Solution

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!