react-id-swiper: Unexpected token import with nextjs

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 12
Comments: 20 (4 by maintainers)

Most upvoted comments

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

+10

kidjp85 on Mar 25, 2019

@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'],
      })
    )
  )
);

rossenv on Mar 19, 2019

@rohmanhm , here you are

kidjp85 on Mar 17, 2019

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:

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

kidjp85 on Mar 15, 2019

Same the problem with @rossenv

nghiepdev on Mar 22, 2019

Syntax error in ie11

-> class Dom7 ....

I give up and will downgrade to 1.6.9 😦

rossenv on Mar 27, 2019

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/.*)",
  ],

and-who on Mar 26, 2019

I tried to test 2.1.1 and decided downgrade to 1.6.9 😭

nghiepdev on Mar 26, 2019

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.

rohmanhm on Mar 19, 2019

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

rohmanhm on Mar 19, 2019