我有这个组件，我从Swiper JS导入所需的和模块到组件。由于某些原因，这些文件没有被导入或根本无法工作。这只发生在使用Next 13时。有什么诀窍或解决办法吗?
"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"
}
}
方法一:试试用CDN代替。
不使用实验/app目录:
创建文件_document.jspages文件夹中。然后添加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>
)
}
使用实验/app目录:
编辑app/layout.tsx文件(注意:它可以是layout.js, layout.js。jsx,布局。ts,布局。(取决于你的项目)
// 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>
);
}
尝试启用es-modules-support在你的Next.js项目。
要做到这一点:编辑next.config.js文件。然后输入:
// next.config.js
module.exports = {
// Prefer loading of ES Modules over CommonJS
experimental: { esmExternals: true },
// other configuration here...
};
尝试导入"swiper/swiper.min.css"而不是"swiper/css";