React-id-swiper: Syntax error in ie11 with nextjs

[rossenv]

Syntax error in ie11

-> class Dom7 ....

[haThaiHoang]

Same issue here

[catamphetamine]

Same errors:

SyntaxError: Use of reserved word 'class'

Error: Syntax error

class Dom7 {

Seems that the dom7 dependency is imported somewhere without being transpiled first.

[rossenv]

yep -> https://github.com/kidjp85/react-id-swiper/issues/259

[catamphetamine]

@rossenv Seems to be a bug in the Swiper package. See https://github.com/nolimits4web/swiper/issues/3047

See the original issue in the Swiper repo: https://github.com/nolimits4web/swiper/issues/2670

[catamphetamine]

So, you wouldn't believe it but the "Swiper" library author @nolimits4web silently deleted my bug report from his repository: https://github.com/nolimits4web/swiper/issues/3047
Very childish, rude and unprofessional.
I guess I'll have to look for better alternatives to the "Swiper" library.

In the meantime, for everyone having their Internet Explorer broken by the "Swiper" library here's the workaround I found that stops the "Swiper" library from breaking Internet Explorer:

• Go to Webpack configuration (webpack.config.js).
• Find babel-loader there.
• Modify its exclude from /node_modules/ (the default on the internet) to /node_modules[\/\\](?!(swiper|dom7)[\/\\])/ (I saw the idea in react-id-swiper's package.json).
• Now Webpack bundles the website while also actually transpiling dom7 and swiper packages (doing the work the dom7/swiper library author should have done before releasing those untranspiled).

Internet Explorer is still a popular browser in some areas.
Breaking it is unacceptable.

[skaltenegger]

Thanks @catamphetamine for your guide to making react-id-swiper work with IE11. Do you have a working example I could take a look at (or codesandbox?) We tried to implement your suggested changes in a next.js SSR project but somehow could not get it working in IE11. Any help would be much appreciated!

Also @kidjp85 is there a suggested fix you can recommend in order to support IE11 with react-id-swiper? If so, I'd be happy to hear, thanks a lot.

Best,
Stefan

[jcicero518]

Thank you @catamphetamine . Same issue here - syntax error because the Dom7 class isn't transpiled in the Swiper library. E.g. with fix: (using TypeScript here so the _@babel/typescript_ preset is unnecessary if you're not using it)

rules: [ { test: [/.js$|.ts$/], exclude: /node_modules[\/\\](?!(swiper|dom7)[\/\\])/, use: { loader: 'babel-loader', options: { presets: [ '@babel/typescript', '@babel/preset-env' ] } } }]

[Antonio-Laguna]

Tried this, getting awkward error saying

configuration.module.rules[41].exclude[1]: The provided value "/node_modules[\\/\\\\](?!(swiper|dom7)[\\/\\\\])/" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.

Does anyone have this working?

[Antonio-Laguna]

Made a new issue here: https://github.com/nolimits4web/swiper/issues/3199 I'd encourage you to join to prevent a deletion again.

[Antonio-Laguna]

Just got closed and locked. :/

[floodedcodeboy]

Another issue regarding this posted here : https://github.com/nolimits4web/swiper/issues/3129

[mathishuettl]

same problem. I tried @catamphetamine solution, but it won't work. Is there any solution for this problem? it's really important because we want to launch the page asap.

[Antonio-Laguna]

@mathishuettl FWIW I added a custom alias for swiper, something like this:

mix.alias({
    'swiper': 'node_modules/swiper/dist/js/swiper.js',
    'swipercss': 'node_modules/swiper/dist/css/swiper.min.css'
});

Not ideal, not the best but does the trick.

[mathishuettl]

@Antonio-Laguna ty for the help, but it seems like ur using laravel because of mix.js? I don't know how to use mix... (I don't use laravel)

[Antonio-Laguna]

Yeah, that's why I added a link to the custom alias on webpack:

https://webpack.js.org/configuration/resolve/#resolvealias

Sorry if it wasn't clear. mix.alias is just a wrapper around resolve.alias

[mathishuettl]

@Antonio-Laguna sorry I'm not that familiar with webpack.

module: {
    rules : [
      // JavaScript/JSX Files
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules[\/\\](?!(swiper|dom7)[\/\\])/,
        use: ['babel-loader'],
      }
    ]
  },

  resolve: {
    alias: {
      'swiper': 'node_modules/swiper/dist/js/swiper.js',
      'swipercss': 'node_modules/swiper/dist/css/swiper.min.css'
    }
  },

I get this error:

[Antonio-Laguna]

Do you have swiper installed? Is it on your package.json?

[mathishuettl]

I got it!!!
Thanks for you help mate!!

alias: {
      'swiper': path.resolve(__dirname, 'node_modules/swiper/dist/js/swiper.js'),
      'swipercss': path.resolve(__dirname, 'node_modules/swiper/dist/css/swiper.min.css')
    }

[tohbansoon]

Hi guys, i still cannot fix this...
According to react-id-swiper document, I have added this into the webpack.config.js. I believe this is to use babel to include dom7 and swiper module and transpile it into es5 code

rules: [
  {
      test: /\.js(x)?$/,
      exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.jsx?$/],
      use: [{ loader: 'babel-loader' }],
  }
]

But after npm run build, I can still find const syntax inside the .js file in dist folder... I can confirm the syntax is came from the swiper module

This cause old browser like safari9 or IE10 display error as below

SyntaxError: Use of const in strict mode.

I m not using nextJS but i hope can find some help in this thread

[RyanGosden]

@tohbansoon - hopefully this helps https://github.com/kidjp85/react-id-swiper/issues/332

[tohbansoon]

thanks @RyanGosden ... i end up by downgrading react-id-swiper version back to 1.X.X
Will try your solution again once I have free time to upgrade it ...

[finnlewis]

Just for the record, we're compiling TypeScript with webpack and we have a loader.js with the following:

// Typescript loader
const ts = {
  test: /\.(tsx?|jsx?)$/,
  exclude: [
    /node_modules\/(?!(swiper|ssr-window|dom7)\/).*/,
    /.out/,
    /.storybook/,
  ],
  use: [
    {
      loader: 'babel-loader',
      options: {
        configFile: `${__dirname}/babel.config.json`,
      },
    },
  ],
};

This now transpiles the swiper, ssr-window and dom7 modules and swiper is now working in IE11, with the polyfills working too.
We're using the following versions:

    "swiper": "^5.4.2",
    "babel-loader": "^8.0.6",
    "webpack": "^4.42.1",

Note: it took me a while to notice that the 'test' line needed to include .js files as well as .ts files now that we are including certain node_modules, as the rest of our code is .ts files.

  test: /\.(tsx?|jsx?)$/,

Thanks to averyone for sharing comments and suggestions, it helped!