모듈을 찾을 수 없습니다.'swiper/react'를 해결할 수 없습니다.

모듈을 찾을 수 없습니다.'swiper/react'를 해결할 수 없습니다.

최신 버전의 Swiper에서도 같은 문제가 발생하고 있습니다.이전 프로젝트에서는 작동했지만 지금은 작동하지 않습니다.그 버전도 아니고.최신 버전도 사용해 보았다.

여기 제 코드가 있습니다.

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

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

const App = () => {
  return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log("slide change")}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

export default App;

코드를 실행할 때마다 "모듈을 찾을 수 없습니다.swiper/react를 해결할 수 없습니다.

swiper 버전7은 순수 ESM이 있는 경우에만 기능합니다.없을 경우 버전 6.8.4로 다운그레이드해야 합니다.

npm:

npm install swiper@6.8.4

실:

yarn add swiper@6.8.4

그런 다음 다음과 같은 구조를 추가합니다.

import { Swiper, SwiperSlide } from "swiper/react";
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'

<Swiper
      spaceBetween={50}
      slidesPerView={3}
      centeredSlides
      onSlideChange={() => console.log("slide change")}
      onSwiper={swiper => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>

버전 6.8.4 매뉴얼은 이쪽

Create React App은 아직 순수 ESM 패키지를 지원하지 않습니다.Swiper(7.2.0+)를 사용할 수 있습니다.

이 경우 직접 파일 Import를 사용해야 합니다.

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

출처 : Swiper docs | https://swiperjs.com/react#usage-with-create-react-app

swiper 모듈에 인덱스 파일이 없습니다.Import 경로를 변경하기만 하면 됩니다.

 import { Swiper, SwiperSlide } from 'swiper/react`'; 

 to

 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';

---

리액트 시 Swiperjs 수정 최신 버전의 Swiperjs에서는 문제가 있는 것 같습니다.

• 리액트 프로젝트에 이미 추가한 경우 swiperj를 제거합니다.

  npm uninstall swiper

• Swiperjs 버전 6.0.2 설치

  npm install swiper@6.0.2

이것이 도움이 되는지 알려주세요:) Happy Hacking (해킹)

사용하고 있는 것:

import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';
import 'swiper/swiper.min.css';

출처 : github.com/nolimits4web/swiper/issues/4871

갱신했다

이제 react-scripts를 5.0.0으로 업그레이드하면 다음을 사용할 수 있습니다.

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

이것은 swiper 버전7의 문제입니다.

https://github.com/nolimits4web/swiper/issues/4871

이전 버전의 swiper를 사용합니다.

같은 문제가 발생하여 Import를 다음과 같이 변경하였습니다.

import Swiper from 'swiper';

스위퍼를 다운그레이드 합니다.swiper@6.0.2버전

swiper 6.8.4를 사용하려면 다음과 같은 직접 파일 가져오기를 사용해야 합니다.

import { Swiper, SwiperSlide } from "swiper/react/swiper-react";
import "swiper/swiper-bundle.min.css";
import "swiper/swiper.min.css";
import 'swiper/modules/effect-fade/effect-fade';
import "swiper/modules/navigation/navigation";
import "swiper/modules/pagination/pagination";

swiper/react/swiper-react.js로의 경로 변경도 도움이 되었습니다.

다음은 swiper 팀이 데모에서 수행한 작업입니다(예: 반응 조작 예).
그들은 빌드 및 개발에 Vite를 사용하고 있다.

• package.json

  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  },

• vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

기존 CRA를 vite로 이행하는 방법은 다음과 같습니다.
참고: 새로운 버전의 vite 프로젝트를 생성해야 할 수 있습니다.

이 문제에 대처하기 위한 일부 팀원들의 활동이 소진된 것처럼 보이지만, 이전 버전으로 이행하는 것이 최선의 실행 계획은 아니라고 생각합니다.순수 ESM 패키지로 이행하기 위한 특정 요지와 #10933, #10892...를 복잡하게 만드는 create-react-app의 몇 가지 문제를 언급하는 것은 좋은 개발 경험이 없을 수 있습니다.

이 버전을 사용하십시오.나한테는 효과가 있었어.

npm i swiper@^6.5.1

@vyvu가 말했듯이 react-module을 5.0.0으로 업그레이드하면 다음 기능을 사용할 수 있습니다.

// I am using swiper version "^8.1.0"
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

// Core modules imports are same as usual
import { Navigation, Pagination } from 'swiper';
// Direct React component imports
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';

// Styles must use direct files imports
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module

또는 링크 => https://swiperjs.com/react#usage-with-create-react-app 를 체크할 수 있습니다.

언급URL : https://stackoverflow.com/questions/69202975/module-not-found-cant-resolve-swiper-react