Question 72622 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Swiper JS import CSS not working on Next 13 – Reactjs

I have this component where I am importing the required and modules from Swiper JS to the component. For some reason the files are not imported or working at all. This only happens when using Next 13. Is there something like a trick or workaround?

    "use client";

import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

// import required modules
import { Pagination } from "swiper";

export default function Home() {
  return (
    <Swiper
      pagination={{
        dynamicBullets: true,
      }}
      modules={[Pagination]}
      className="mySwiper"
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
      <SwiperSlide>Slide 6</SwiperSlide>
      <SwiperSlide>Slide 7</SwiperSlide>
      <SwiperSlide>Slide 8</SwiperSlide>
      <SwiperSlide>Slide 9</SwiperSlide>
    </Swiper>
  );
}

Package.json:

{
  "name": "swiper-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "18.15.11",
    "@types/react": "18.0.35",
    "@types/react-dom": "18.0.11",
    "autoprefixer": "10.4.14",
    "eslint": "8.38.0",
    "eslint-config-next": "13.3.0",
    "next": "13.2.4",
    "postcss": "8.4.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "swiper": "9.1.1",
    "tailwindcss": "3.3.1",
    "typescript": "5.0.4"
  }
}
Tags:

2

Answers


  1. 0

    Method 1:

    Try using CDN instead.

    Not using the experimental/app directory:

    Create a file called _document.js inside the pages folder. And then add swiperjs css CDN.

    // _document.js

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

    Using The experimental /app directory:

    Edit the app/layout.tsx file (Note: it can be layout.js, layout.jsx, layout.ts, layout.tsx depending on your project)

    // app/layout.tsx

export default function RootLayout({
  // Layouts must accept a children prop.
  // This will be populated with nested layouts or pages
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
      </head>
      <body>{children}</body>
    </html>
  );
}

    Method 2:

    Try enabling es-modules-support in your Next.js project.

    To do this:
    Edit the next.config.js file. And put this:

    // next.config.js 

module.exports = {
  // Prefer loading of ES Modules over CommonJS
  experimental: { esmExternals: true },

  // other configuration here...
};
    Login or Signup to reply.
  2. 0

    Try importing "swiper/swiper.min.css" instead of "swiper/css"; this works fine with the app structure.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search