next.js 13 with swiper slider

[ProgrammingPlanet-ir]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

hi, in next 12, next and swiper slider works together. but in next 13, we have a problem. because of swiper slider needs context in it's structure, it need to be a client component and "use client", but we cann't add "use client" in the structure of swiper.js.
what is the solution?

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

nothing-in-github

To Reproduce

swiper slider needs to be a client component.

Describe the Bug

./node_modules/swiper/react/context.js

You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

,----
1 | import { createContext, useContext } from 'react';
: ^^^^^^^^^^^^^
`----

Maybe one of these should be marked as a client entry with "use client":
node_modules\swiper\react\context.js
node_modules\swiper\react\swiper-react.js
components\cart\index.jsx
app\page.jsx

Expected Behavior

go to top:)

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[balazsorban44]

You can refer to the docs: https://beta.nextjs.org/docs/rendering/server-and-client-components#third-party-packages

[ProgrammingPlanet-ir]

Thank's for your answer, but it does not works.
in the doc, next.js says you should write you Swiper code in the page. right?
if I transfer this code from component to the page, same error happens. said

"You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default."

[adlerweb3]

For me, it is solved by changing:

import "swiper/css";
to
import "swiper/swiper.min.css";

[Next 13.3.0] [App Directory] ['use client']

[Neel2107]

I'm having the same problem with Next JS 14 and Swiper JS 11.0.5.

[MuLoo]

I have the same problem

[okumo]

It worked for me as well, adding in my layout.tsx file:
import "swiper/swiper-bundle.css";

[manikantcodeandtheory]

What else you imported @okumo under your component ?

[okumo]

My layout.tsx file has:
`
import { register } from "swiper/element/bundle";
// Import Swiper styles
import "swiper/swiper-bundle.css";
import "swiper/css/pagination";

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
register();

return (

{children}

);
}
Then in my file where I use the swiper, I have this:
"use client";
import { Swiper, SwiperSlide } from "swiper/react";
`

[zoheirkhonyagar]

try adding these lines:

import 'swiper/react';
import 'swiper/css';

[TECHCROWDMY]

i got this issue the moment i implemented swiperjs into a nextjs project.
./node_modules\swiper\swiper-react.mjs
ReactServerComponentsError:

You're importing a component that needs useRef. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

,-[C:\Users\thila\OneDrive\Documents\ecommerce\NextJS + Sanity + Stripe\my-project\node_modules\swiper\swiper-react.mjs:10:1]

10 | * Released on: July 8, 2023
11 | */
12 |
13 | import React, { useEffect, useLayoutEffect, useContext, createContext, forwardRef, useState, useRef } from 'react';
: ^^^^^^
14 | import { S as Swiper$1 } from './shared/swiper-core.mjs';
15 | import { g as getParams, m as mountSwiper, a as getChangedParams, u as updateOnVirtualData } from './shared/update-on-virtual-data.mjs';
16 | import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination, e as extend, u as updateSwiper } from './shared/update-swiper.mjs';
`----

Maybe one of these should be marked as a client entry with "use client":
./node_modules\swiper\swiper-react.mjs
./app\sections\Products.tsx
./app\page.tsx

[marvellousadesanya]

Thank you sooo much!! This worked!

[TECHCROWDMY]

ok i managed to solve it by by adding "use client" in the first line of code.

[sem22-dev]

lol

[radyyyyy567]

worked

[tossivahva]

same for me xD

[mocutasorin]

Add "use client;" to the top of the component where you are using Swiper.

My setup with Next 13 and Swiper 10.3.1:

"use client";
import { Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";


// use below
<Swiper
     navigation
     pagination={{ type: "bullets" }}
     modules={[Navigation, Pagination]}
    >
    .....

Also created a repository. Can be used as a starter.
https://github.com/mocutasorin/swiper-nextjs

[mernfa]

I think this course can help you if you are Persian. this is a course about sliders in next js .

[mojtaba1180]

XDDD benazam mard <3

[akoushke]

doodool talaye noghola :)

[ronniechoyy]

I'm facing the same problem at the moment, but I'm using page route, seems no solution found at the moment

[ronniechoyy]

Just a bit shame that I have to ask the AI aka copilot, here is the solution copilot give me, that's work on nextjs page route.
I made a custom component to handle the origin swiper component,
constant the module state by use state and import the 'swiper/react' by use effect hook,
finally check if the module not load than return null.

const [swiper, setSwiper] = useState(null);
const [Swiper, setSwiperComponent] = useState(null);
const [SwiperSlide, setSwiperSlideComponent] = useState(null);

useEffect(() => {
    import('swiper/react').then(({ Swiper, SwiperSlide }) => {
      setSwiperComponent(() => Swiper);
      setSwiperSlideComponent(() => SwiperSlide);
    });
  }, []);

  if (!Swiper || !SwiperSlide) {
    return null;
  }

return(
 //my actual component
)