Swiper with nextJS 14

[m1chale]

Hello everybody,
has someone tried using swiper (react) with nextJS Version 14.
Since the upgrade i get the following error:

node_modules/swiper/react/use-isomorphic-layout-effect.js:1
import { useEffect, useLayoutEffect } from 'react';
         ^^^^^^^^^
SyntaxError: Named export 'useEffect' not found. The requested module 'react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react';
const { useEffect, useLayoutEffect } = pkg;

Thanks for your help
Michael

[hajirasyafi]

please follow the steps for upgrade guide :
https://nextjs.org/docs/pages/building-your-application/upgrading
the problem is not from swiper, the problem came from your apps

[valentindiehl]

That's not true starting with Next.14. Since server components can be nested inside client components, every component that isn't marked with 'use client' will be considered a server component. Since we don't have direct access to swipers node_modules, there's no way to use it in Next.14 since even with 'use client' on the component and dynamic import with SSR:false for Swiper and SwiperSlide, Next.JS considers the components Server components and fails with createContext().

[valentindiehl]

You can verify this by adding 'use client' inside node_modules/swiper/swiper-react.mjs, then it suddenly works (fails for me with hydration errors, but at least the error message mentioned is gone

[Lucas-Jara]

[valentindiehl]

Doesn't work with Next.14 unfortunately since server components can be nested inside client components :(

[AbhayaShankar]

Starting from Next 13, Components have to be specified as whether you wanna use them as server side or client side.

In order to interact using event listeners or use hooks like useState or useEffect, you will have to specify the component as client-side that will make sure that this component should be rendered on the client-side. This can be done by declaring "use client" at the very top of the component.

For more info refer the official docs by Nextjs - https://nextjs.org/docs/app/building-your-application/rendering/client-components

That should resolve your error ig. ✅💡

[Priyankcoder]

I used "use client" on top of my component cardSwipe that is using swiper. But I am still getting the same error after deploying it to vercel. I am importing my cardSwipe to a static page route [productName].js. Do I need to specify "use client" there as well?

[valentindiehl]

The problem lies in the system that with NextJS 14, server components can be inside client components, so every component inside a "use client" component is considered a server component if it isn't marked with 'use client'. So also for me, even with 'use client' in my component, it considers the "Swiper" component from swiperJS as a server component that can't use createContext.