Search code examples
javascriptwebpackbabeljsswiper.jsbabel-loader

Transform of Swiper v4 for IE11 failed (with Webpack 5 + Babel 7)

I build and pushed a simplified version of what I'd like to do:
https://github.com/vaxul/swiper4-webpack5-babel7

What it should do

When open the index.html in Internet Explorer 11 (IE11), the slideshow with Swiper is working.

What happend

The IE11 throws the error:

SCRRIPT1002: Syntax error
vendors.js (3135,1)

This is caused by a class declaration in line 3135.

I have to use Swiper v4, since it's the last compatible version for IE11.

The current setup of Webpack 5 uses Babel 7 and the Browserlist from Bootstrap.

The debug of babel shows:

...

Using targets:
{
  "android": "4.4",
  "chrome": "45",
  "edge": "12",
  "firefox": "38",
  "ie": "10",
  "ios": "9",
  "opera": "30",
  "safari": "9",
  "samsung": "12"
}

...

Using plugins:
...
transform-classes { "android":"4.4", "chrome":"45", "edge":"12", "firefox":"38", "ie":"10", "ios":"9", "opera":"30", "safari":"9" }
...

You can see that the transformation for classes is running, when look into the result of example class in:
https://github.com/vaxul/swiper4-webpack5-babel7/blob/master/dist/js/source_Slider_mjs.239afbde125d3f32e9af.js#L18

BUT it didn't transform the mentions class Dom7 from node_modules/dom7/dist/dom7.modular.js.

Currently I have no clue why it doesn't work.

From my point of view I would expect that babel-loader will transform all the code including files from node_modules.

I really hope someone has a hint for me and point me into the right direction. Please. 😊

EDIT 1

After renameíng .babelrc to babel.config.json and adding a little configuration to babel-loader, the code of class Dom7 is transformed correctly.

BUT, now I face the issue within every browser with the error:

ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: WA63

Solution

  • Working version: https://github.com/vaxul/swiper4-webpack5-babel7

    The keychanges: