Configuration for swiper to work

[xavianaxw]

I've posted a question on https://stackoverflow.com/questions/58928212/configuration-to-use-swiper-as-an-es-module about this issue but the gist of it is I can't get the same behavior from a CDN javascript file and that compiled from an import statement.

The plugin I'm using is https://swiperjs.com/

and under the Get Started documentation, it states that

Swiper package comes with ES module version which can be used where supported or with bundlers like Webpack or Rollup:

In case you use it as an ES module make sure:

• you have enabled Babel or Buble to transpile it to ES5 syntax,
• you have enabled node modules resolving and babel transpiling for Swiper as it uses Dom7 and ssr-window packages as dependencies.

Here's what I've done on my task-config.js

module.exports = {
  html        : true,
  images      : true,
  fonts       : true,
  static      : true,
  svgSprite   : true,
  ghPages     : true,
  stylesheets : {
    autoprefixer: {
      grid: "no-autoplace",
    },
    cssnano: {
      zindex: false, // turn off postcss-zindex plugin
    },
  },

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ["core-js/stable", "regenerator-runtime/runtime", "./app.js"]
    },
    babelLoader: {
      // "test" is derived from TASK_CONFIG.javascripts.extensions
      // "options" is derived from TASK_CONFIG.javascripts.babel
      loader: "babel-loader",
      exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
    },
    alias: {
      PlyrDefaults: "plyr/src/js/config/defaults.js",
      PlyrPolyfilled: "plyr/dist/plyr.polyfilled.min.js",
    },
    publicPath: "/build/javascripts",
  },

  browserSync: {
    proxy: {
      target: "http://ausdecom.local",
    },
    files: ["craft/templates/**/*"],
  },

  production: {
    rev: true,
  }
}

Hope someone can point me into the right direction for this.