Swiper sample does not work with Next 13 out of the box

Question

Swiper does not work with Next 13. The default React example of Swiper + 'use client' at the top of the page does not work.

Steps to reproduce:

• Use this command to create a bare-bone Next 13 app:

• npx --yes create-next-app next --use-npm --js --eslint --no-src-dir --experimental-app --import-alias @/*

• Then remove the global style from layout.js.

• Then replace the entire page.js content with Swiper's default example for react.

• Add 'use client' to the top of page.js

• Now run using npm run dev.

• You should see that slides are stacked one above the other.

How can I fix this?

Answer 1

For me, it is solved by changing:

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

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