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

[kidjp85]

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

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