React-id-swiper: Unexpected token import in NextJS

[deependhamecha]

I am using the plugin in NextJs in one of the component like below:

import Swiper from 'react-id-swiper';
import SwiperCSS from 'react-id-swiper/src/styles/scss/swiper.scss';

And getting this error :

C:\code\my-next\node_modules\react-id-swiper\lib\ReactIdSwiper.js:11
import React, { Component } from 'react';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\code\my-next\node_modules\react-id-swiper\lib\index.js:1:80)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)

[kidjp85]

Hi @deependhamecha , did you try the newest version ?

[kidjp85]

I tested newest version in nextjs and had no trouble

[vuhuucuong]

i experience the same issue

[zavoluk]

Same here.
Defining Component

import React from 'react'
import Swiper from 'react-id-swiper'
// Need to add Pagination, Navigation modules
import { Pagination, Navigation } from 'swiper/dist/js/swiper.esm'

const Carousel = () => {
    const params = {
        modules: [Pagination, Navigation],
        pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        spaceBetween: 30
    }

    return (
        <Swiper {...params}>
            <div>Slide 1</div>
            <div>Slide 2</div>
            <div>Slide 3</div>
            <div>Slide 4</div>
            <div>Slide 5</div>
        </Swiper>
    )
}

export default Carousel

Using component as

import React from 'react'
import Layout from '../layouts/main'
import Carousel from '../components/carousel'

const Page = ({}) => {
    return (
        <Layout>
            <Carousel />
        </Layout>
    )
}

export default Page

Error log

C:\projects\project\node_modules\swiper\dist\js\swiper.esm.js:13
import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as tran
sition$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:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:646:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
Compiled successfully!

Note that pages will be compiled when you first load them.
C:\projects\project\node_modules\swiper\dist\js\swiper.esm.js:13
import { $, addClass, removeClass, hasClass, toggleClass, attr, removeAttr, data, transform, transition as tran
sition$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:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:646:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (C:\projects\project\node_modules\react-id-swiper\lib\ReactIdSwiper.js:25:20)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loa

[wbasmi]

Same as @zavoluk

[logvi]

+1

[ahmetaykutay]

+1

[evgenyantipin]

+1