const{Fragment:l,jsx:e,jsxs:n}=arguments[0];function _createMdxContent(r){const s={a:"a",code:"code",figcaption:"figcaption",figure:"figure",h2:"h2",h3:"h3",p:"p",pre:"pre",span:"span",...r.components},{MDXImage:c,MDXLink:o}=s;return c||_missingMdxReference("MDXImage",!0),o||_missingMdxReference("MDXLink",!0),n(l,{children:[e(s.h2,{id:"summary",children:e(s.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#summary",children:"Summary"})}),"\n",e(s.p,{children:"Next.js에서 Swiper를 사용하다가 타입 에러 TypeError: Cannot convert undefined or null to 에러가 발생하였습니다. 이 문제를 해결하기 위해 다음과 같은 방법을 사용하였습니다."}),"\n",e(s.h2,{id:"문제점-발견",children:e(s.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#문제점-발견",children:"문제점 발견"})}),"\n",e(c,{alt:"Swiper 타입에러",src:"/static/swiper-error-log-b9a765.png",width:"600px"}),"\n",n(s.p,{children:["Next.js에서 Swiper Thumbs gallery loop ",e(o,{href:"https://swiperjs.com/demos#thumbs-gallery-loop",title:"Swiper Thumbs gallery loop"}),"를 사용하다가 타입 에러가 발생하였습니다."]}),"\n",e(s.p,{children:"빠르게 작업하려다보니 swiper에서 제공한 코드를 그대로 사용하였습니다."}),"\n",e(s.h3,{id:"swiper에서-제공한-코드",children:e(s.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#swiper에서-제공한-코드",children:"swiper에서 제공한 코드"})}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:[e(s.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"dark-plus",children:"swiper.tsx"}),e(s.pre,{style:{backgroundColor:"#1E1E1E",color:"#D4D4D4"},tabIndex:"0","data-language":"tsx","data-theme":"dark-plus",children:n(s.code,{"data-language":"tsx","data-theme":"dark-plus",style:{display:"grid"},children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#9CDCFE"},children:" React"}),e(s.span,{style:{color:"#D4D4D4"},children:", { "}),e(s.span,{style:{color:"#9CDCFE"},children:"useRef"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"useState"}),e(s.span,{style:{color:"#D4D4D4"},children:" } "}),e(s.span,{style:{color:"#C586C0"},children:"from"}),e(s.span,{style:{color:"#CE9178"},children:" 'react'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:"// Import Swiper React components"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#D4D4D4"},children:" { "}),e(s.span,{style:{color:"#9CDCFE"},children:"Swiper"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"SwiperSlide"}),e(s.span,{style:{color:"#D4D4D4"},children:" } "}),e(s.span,{style:{color:"#C586C0"},children:"from"}),e(s.span,{style:{color:"#CE9178"},children:" 'swiper/react'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:"// Import Swiper styles"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#CE9178"},children:" 'swiper/css'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#CE9178"},children:" 'swiper/css/free-mode'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#CE9178"},children:" 'swiper/css/navigation'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#CE9178"},children:" 'swiper/css/thumbs'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#CE9178"},children:" './styles.css'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:"// import required modules"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"import"}),e(s.span,{style:{color:"#D4D4D4"},children:" { "}),e(s.span,{style:{color:"#9CDCFE"},children:"FreeMode"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:" } "}),e(s.span,{style:{color:"#C586C0"},children:"from"}),e(s.span,{style:{color:"#CE9178"},children:" 'swiper/modules'"}),e(s.span,{style:{color:"#D4D4D4"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:"export"}),e(s.span,{style:{color:"#C586C0"},children:" default"}),e(s.span,{style:{color:"#569CD6"},children:" function"}),e(s.span,{style:{color:"#DCDCAA"},children:" App"}),e(s.span,{style:{color:"#D4D4D4"},children:"() {"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#569CD6"},children:" const"}),e(s.span,{style:{color:"#D4D4D4"},children:" ["}),e(s.span,{style:{color:"#4FC1FF"},children:"thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#4FC1FF"},children:"setThumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:"] = "}),e(s.span,{style:{color:"#DCDCAA"},children:"useState"}),e(s.span,{style:{color:"#D4D4D4"},children:"("}),e(s.span,{style:{color:"#569CD6"},children:"null"}),e(s.span,{style:{color:"#D4D4D4"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#C586C0"},children:" return"}),e(s.span,{style:{color:"#D4D4D4"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#808080"},children:" <>"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" <"}),e(s.span,{style:{color:"#4EC9B0"},children:"Swiper"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" style"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"{"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#CE9178"},children:" '--swiper-navigation-color'"}),e(s.span,{style:{color:"#9CDCFE"},children:":"}),e(s.span,{style:{color:"#CE9178"},children:" '#fff'"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#CE9178"},children:" '--swiper-pagination-color'"}),e(s.span,{style:{color:"#9CDCFE"},children:":"}),e(s.span,{style:{color:"#CE9178"},children:" '#fff'"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#D4D4D4"},children:" }"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" loop"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" spaceBetween"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#B5CEA8"},children:"10"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"{ "}),e(s.span,{style:{color:"#9CDCFE"},children:"swiper:"}),e(s.span,{style:{color:"#9CDCFE"},children:" thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:" }"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" modules"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"["}),e(s.span,{style:{color:"#9CDCFE"},children:"FreeMode"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"]"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" className"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#CE9178"},children:'"mySwiper2"'})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#808080"},children:" >"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" <"}),e(s.span,{style:{color:"#4EC9B0"},children:"SwiperSlide"}),e(s.span,{style:{color:"#808080"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" <"}),e(s.span,{style:{color:"#569CD6"},children:"img"}),e(s.span,{style:{color:"#9CDCFE"},children:" src"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#CE9178"},children:'"https://swiperjs.com/demos/images/nature-1.jpg"'}),e(s.span,{style:{color:"#808080"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#569CD6"},children:" {"}),e(s.span,{style:{color:"#6A9955"},children:"/* more .. */"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" <"}),e(s.span,{style:{color:"#4EC9B0"},children:"Swiper"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" onSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#9CDCFE"},children:"setThumbsSwiper"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" loop"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" spaceBetween"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#B5CEA8"},children:"10"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" slidesPerView"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#B5CEA8"},children:"4"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" freeMode"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" watchSlidesProgress"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" modules"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"["}),e(s.span,{style:{color:"#9CDCFE"},children:"FreeMode"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"]"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" className"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#CE9178"},children:'"mySwiper"'})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#808080"},children:" >"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" <"}),e(s.span,{style:{color:"#4EC9B0"},children:"SwiperSlide"}),e(s.span,{style:{color:"#808080"},children:">"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" <"}),e(s.span,{style:{color:"#569CD6"},children:"img"}),e(s.span,{style:{color:"#9CDCFE"},children:" src"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#CE9178"},children:'"https://swiperjs.com/demos/images/nature-1.jpg"'}),e(s.span,{style:{color:"#808080"},children:" />"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#569CD6"},children:" {"}),e(s.span,{style:{color:"#6A9955"},children:"/* more .. */"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#808080"},children:" "})}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#D4D4D4"},children:" );"})}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#D4D4D4"},children:"}"})})]})})]}),"\n",e(s.p,{children:"swiper 공식문서에는 타입스크립트를 제공하지 않아서 타입을 자체적으로 지정해주어야합니다."}),"\n",n(s.p,{children:["문제는 ",e(s.code,{children:"Swiper Thumbs gallery loop"}),"를 사용하기 위해서는 useState를 사용해야하는데 이를 사용하면서 Type을 지정해주지 않아서 발생한 문제였습니다."]}),"\n",e(s.p,{children:"null 타입이 있어서 swiper에서 제공하는 타입을 사용하였습니다."}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:[e(s.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"dark-plus",children:"swiper.tsx"}),e(s.pre,{style:{backgroundColor:"#1E1E1E",color:"#D4D4D4"},tabIndex:"0","data-language":"tsx","data-theme":"dark-plus",children:n(s.code,{"data-language":"tsx","data-theme":"dark-plus",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:"// ... 내용 같음"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#569CD6"},children:"const"}),e(s.span,{style:{color:"#D4D4D4"},children:" ["}),e(s.span,{style:{color:"#4FC1FF"},children:"thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#4FC1FF"},children:"setThumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:"] = "}),e(s.span,{style:{color:"#DCDCAA"},children:"useState"}),e(s.span,{style:{color:"#D4D4D4"},children:"<"}),e(s.span,{style:{color:"#4EC9B0"},children:"SwiperClass"}),e(s.span,{style:{color:"#D4D4D4"},children:" | "}),e(s.span,{style:{color:"#4EC9B0"},children:"null"}),e(s.span,{style:{color:"#D4D4D4"},children:">("}),e(s.span,{style:{color:"#569CD6"},children:"null"}),e(s.span,{style:{color:"#D4D4D4"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:"// ... 내용 같음"})})]})})]}),"\n",e(s.p,{children:"사실 처음에는 문제가 없었습니다."}),"\n",e(s.p,{children:"하지만 해당 페이지 로딩시 간헐적으로 타입 에러가 발생하였습니다."}),"\n",e(s.p,{children:"문제는 Swiper에서 제공해주는 props의 thumbs의 타입 null의 문제로 인해 발생하였습니다."}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:[e(s.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"dark-plus",children:"swiper.tsx"}),e(s.pre,{style:{backgroundColor:"#1E1E1E",color:"#D4D4D4"},tabIndex:"0","data-language":"tsx","data-theme":"dark-plus",children:n(s.code,{"data-language":"tsx","data-theme":"dark-plus",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:"// ... 내용 같음"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:"<"}),e(s.span,{style:{color:"#4EC9B0"},children:"Swiper"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" style"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"{"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#CE9178"},children:" '--swiper-navigation-color'"}),e(s.span,{style:{color:"#9CDCFE"},children:":"}),e(s.span,{style:{color:"#CE9178"},children:" '#fff'"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#CE9178"},children:" '--swiper-pagination-color'"}),e(s.span,{style:{color:"#9CDCFE"},children:":"}),e(s.span,{style:{color:"#CE9178"},children:" '#fff'"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#D4D4D4"},children:" }"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" loop"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" spaceBetween"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#B5CEA8"},children:"10"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"{ "}),e(s.span,{style:{color:"#9CDCFE"},children:"swiper:"}),e(s.span,{style:{color:"#9CDCFE"},children:" thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:" }"}),e(s.span,{style:{color:"#569CD6"},children:"}"}),e(s.span,{style:{color:"#6A9955"},children:" // <-- thumbs의 타입이 null이라서 발생한 문제"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" modules"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"["}),e(s.span,{style:{color:"#9CDCFE"},children:"FreeMode"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"]"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" className"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#CE9178"},children:'"mySwiper2"'})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#808080"},children:">"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#569CD6"},children:" {"}),e(s.span,{style:{color:"#6A9955"},children:"/* ... More */"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:""})]})]})})]}),"\n",n(s.p,{children:["해당 코드의 해결방법을 위해서 조건을 추가하여 ",e(s.code,{children:"thumbs"})," 의 타입을 null이 아닌 경우에만 사용하도록 변경하였습니다."]}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:[e(s.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"dark-plus",children:"swiper.tsx"}),e(s.pre,{style:{backgroundColor:"#1E1E1E",color:"#D4D4D4"},tabIndex:"0","data-language":"tsx","data-theme":"dark-plus",children:n(s.code,{"data-language":"tsx","data-theme":"dark-plus",style:{display:"grid"},children:[n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:"<"}),e(s.span,{style:{color:"#4EC9B0"},children:"Swiper"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" style"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"{"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#CE9178"},children:" '--swiper-navigation-color'"}),e(s.span,{style:{color:"#9CDCFE"},children:":"}),e(s.span,{style:{color:"#CE9178"},children:" '#fff'"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#CE9178"},children:" '--swiper-pagination-color'"}),e(s.span,{style:{color:"#9CDCFE"},children:":"}),e(s.span,{style:{color:"#CE9178"},children:" '#fff'"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#D4D4D4"},children:" }"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" loop"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" spaceBetween"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#B5CEA8"},children:"10"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{true}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"{"})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#6A9955"},children:" // 이 부분을 변경"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" swiper:"}),e(s.span,{style:{color:"#9CDCFE"},children:" thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:" && !"}),e(s.span,{style:{color:"#9CDCFE"},children:"thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:"."}),e(s.span,{style:{color:"#9CDCFE"},children:"destroyed"}),e(s.span,{style:{color:"#D4D4D4"},children:" ? "}),e(s.span,{style:{color:"#9CDCFE"},children:"thumbsSwiper"}),e(s.span,{style:{color:"#D4D4D4"},children:" : "}),e(s.span,{style:{color:"#569CD6"},children:"null"}),e(s.span,{style:{color:"#D4D4D4"},children:","})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#D4D4D4"},children:" }"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" modules"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#569CD6"},children:"{"}),e(s.span,{style:{color:"#D4D4D4"},children:"["}),e(s.span,{style:{color:"#9CDCFE"},children:"FreeMode"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Navigation"}),e(s.span,{style:{color:"#D4D4D4"},children:", "}),e(s.span,{style:{color:"#9CDCFE"},children:"Thumbs"}),e(s.span,{style:{color:"#D4D4D4"},children:"]"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#9CDCFE"},children:" className"}),e(s.span,{style:{color:"#D4D4D4"},children:"="}),e(s.span,{style:{color:"#CE9178"},children:'"mySwiper2"'})]}),"\n",e(s.span,{"data-line":"",children:e(s.span,{style:{color:"#808080"},children:">"})}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#569CD6"},children:" {"}),e(s.span,{style:{color:"#6A9955"},children:"/* ... More */"}),e(s.span,{style:{color:"#569CD6"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:[e(s.span,{style:{color:"#808080"},children:""})]})]})})]}),"\n",e(s.p,{children:"위 코드를 입력하고 다시 페이지를 로딩하였을 때 타입 에러가 발생하지 않았습니다."}),"\n",e(s.p,{children:"해결!"}),"\n",e(s.h2,{id:"참고",children:e(s.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#참고",children:"참고"})}),"\n",n(s.p,{children:["깃허브 - ",e(o,{href:"https://github.com/nolimits4web/swiper/issues/5630",title:"github swiper issue"})]}),"\n",n(s.p,{children:["스택오버플로우 - ",e(o,{href:"https://stackoverflow.com/questions/73046820/swiper-react-cannot-convert-undefined-or-null-to-object",title:"stackoverflow swiper issue"})]})]})}return{default:function(l={}){const{wrapper:n}=l.components||{};return n?e(n,{...l,children:e(_createMdxContent,{...l})}):_createMdxContent(l)}};function _missingMdxReference(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}