React-id-swiper: Unexpected token import with nextjs

[rohmanhm]

Got this error when using with nextjs.

/sandbox/node_modules/swiper/dist/js/swiper.esm.js:13
import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as transition$1, on, off, trigger, transitionEnd as transitionEnd$1, outerWidth, outerHeight, offset, css, each, html, text, is, index, eq, append, prepend, next, nextAll, prev, prevAll, parent, parents, closest, find, children, remove, add, styles } from 'dom7/dist/dom7.modular';
^^^^^^

SyntaxError: Unexpected token import

Here's the sandbox:
https://codesandbox.io/s/k29xjy98j3?fontsize=14

[estepanov]

Also just encountered this. I found another issue on this repo with Unexpected token import and next.js but that error pointed to issue with importing React. The import error you reference here is the same one I am getting.

/client/node_modules/swiper/dist/js/swiper.esm.js:13
import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as transition$1, on, off, trigger, transitionEnd as transitionEnd$1, outerWidth, outerHeight, offset, css, each, html, text, is, index, eq, append, prepend, next, nextAll, prev, prevAll, parent, parents, closest, find, children, remove, add, styles } from 'dom7/dist/dom7.modular';

All my packages are the latest versions.

[kidjp85]

The issue here is related to es module transpile issue from Next. It's still not fixed yet.
https://github.com/zeit/next.js/issues/706. For now there are 2 temporary solutions here:

1. Using next-transpile-modules
2. Releasing v2.1.1, to let u guys use full transpiler version of Swiper.

[faizrktm]

Thanks for anyone involve on creating this library, it really help me alot.

@kidjp85 my site have server side rendering and using create react app with yarn build && yarn serve command and encounter this problem too, here is the error:

```
/Users/fullstuckdeveloper/yukstay-web/node_modules/swiper/dist/js/swiper.esm.js:13
import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as transition$1, on, off, trigger, transitionEnd as transitionEnd$1, outerWidth, outerHeight, offset, css, each, html, text, is, index, eq, append, prepend, next, nextAll, prev, prevAll, parent, parents, closest, find, children, remove, add, styles } from 'dom7/dist/dom7.modular';
^

SyntaxError: Unexpected token {
at new Script (vm.js:84:7)
at createScript (vm.js:264:10)
at Object.runInThisContext (vm.js:312:10)

[faizrktm]

i manage to fix it by ignoring dom7 and swiper on babel configuration.
here is my code..
reference: https://github.com/nolimits4web/Swiper/issues/2335

[rohmanhm]

@kidjp85 Could you provide an example to use with next-transpile-modules?
That's gonna help a lot

[kidjp85]

@rohmanhm , here you are

[rohmanhm]

Thanks, @kidjp85
That works

[rossenv]

@kidjp85
I'm trying to use next-transpile-modules but this is the error now...

my next.config.js looks like this

module.exports = withTM(
  withCSS(
    withImages(
      withTypescript({
        webpack(config, options) {
          // Do not run type checking twice:
          if (options.isServer) config.plugins.push(new ForkTsCheckerWebpackPlugin());

          config.resolve.modules.unshift(__dirname);

          return config;
        },
        transpileModules: ['swiper', 'dom7'],
      })
    )
  )
);

[rohmanhm]

I'm still getting the error too when using it with typescript project.

[rohmanhm]

Releasing v2.1.1, to let u guys use full transpiler version of Swiper.

Full transpiler version of Swiper is not a problem for me.

[nghiepit]

Same the problem with @rossenv

[parkerhutchinson]

268 trying to get some movement on this as its causing issues with jest as well.

[kidjp85]

@all, I released 2.1.1 which support full version. You can import full version by react-id-swiper/lib/ReactIdSwiper.full

[rossenv]

Hi, but now when I add:
import { Navigation } from 'swiper/dist/js/swiper.esm';
the error is:

[nghiepit]

I tried to test 2.1.1 and decided downgrade to 1.6.9 😭

[rossenv]

Ooops, I just realized that no need to import from swiper/dist/js/swiper when we have ReactIdSwiper.full... In other words we can import Navigator etc. like this:

import Swiper, { Navigation } from 'react-id-swiper/lib/ReactIdSwiper.full';

@kidjp85 fix your examples, pls.
@nghiepit I think there is no need to downgrade ...for now ;)

[and-who]

If you have Problems with your Jest Tests e.g.

/.../node_modules/swiper/dist/js/swiper.esm.js:13
    import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as transition$1, on, off, trigger, transitionEnd as transitionEnd$1, outerWidth, outerHeight, offset, css, each, html, text, is, index, eq, append, prepend, next, nextAll, prev, prevAll, parent, parents, closest, find, children, remove, add, styles } from 'dom7/dist/dom7.modular';
           ^
    SyntaxError: Unexpected token {

My Solution was to let Jest transform the swiper dependencies.
In Jest Config add:

transformIgnorePatterns: [
    "/node_modules/(?!swiper|dom7/.*)",
  ],

[rossenv]

Syntax error in ie11

-> class Dom7 ....

I give up and will downgrade to 1.6.9 :(

[kidjp85]

@rossenv for the full version you don't have to include anything from swiper libs. Just use it like 1.6.9

[rossenv]

@kidjp85 Could you give me an example how to import Swiper, Pagination, Navigation in nextjs which work in major browsers plus ie11?
import { Navigation } from 'swiper/dist/js/swiper.esm'; - doesn't work
import Swiper, { Navigation } from 'react-id-swiper/lib/ReactIdSwiper.full' - doesn't work in ie11