<div id="readability-page-1" class="page"><div><h2 id="이슈">이슈</h2>
<p>swiper 설치하였으나 제대로 동작을 안함, 아래와같은 이슈를 내뱉음</p>
<p><img src="https://velog.velcdn.com/images/ginameee/post/e3f2e863-cb4c-49b9-b146-d0d80c915f89/image.png"></p>
<pre><code>https://nextjs.org/docs/messages/module-not-found
error - Error: swiper tried to access react, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: react (via "react/package.json")
Required by: swiper@npm:9.0.2 (via /Users/chun/Projects/fe-monorepo/.yarn/cache/swiper-npm-9.0.2-c6984e9fe5-2715de6413.zip/node_modules/swiper/react/swiper.js)</code></pre>
<hr>
<h2 id="해결방안">해결방안</h2>
<p>추측으로는 swiper 내부에서 react에 대한 dependency를 누락한 것으로 보인다.<br>
별도로 설치해줄 수 있도록 <code>.yarnrc.yml</code> 에 아래내용을 추가했다.</p>
<pre><code><span>packageExtensions</span><span>:</span>
  <span>'swiper@*'</span><span>:</span>
    <span>dependencies</span><span>:</span>
      <span>'react'</span><span>:</span> <span>'18.2.0'</span></code></pre>
<hr>
<h2 id="참고">참고</h2>
<ul>
<li>
<p>yarn berry &amp; pnp 설명<br>
<a href="https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-2-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9%EA%B8%B0-45f1ba67c24c">https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-2-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9%EA%B8%B0-45f1ba67c24c</a><br>
<a href="https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-1-e4347be5987">https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-1-e4347be5987</a></p>
</li>
<li>
<p>의존성 문제 해결 방안<br>
<a href="https://helloinyong.tistory.com/341">https://helloinyong.tistory.com/341</a> (제일 도움 많이됨)<br>
<a href="https://woong-jae.com/projects/220711-pnp-dependency-error">https://woong-jae.com/projects/220711-pnp-dependency-error</a><br>
<a href="https://github.com/styled-components/styled-components/issues/3082">https://github.com/styled-components/styled-components/issues/3082</a></p>
</li>
<li>
<p>nodeLinker 란?<br>
<a href="https://yarnpkg.com/features/pnp">https://yarnpkg.com/features/pnp</a></p>
</li>
</ul></div></div>

ginameee.log

Jangchun Lee

이슈
swiper 설치하였으나 제대로 동작을 안함, 아래와같은 이슈를 내뱉음
https://nextjs.org/docs/messages/module-not-found
error - Error: swiper tried to access react, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: react (via "react/package.json")
Required by: swiper@npm:9.0.2 (via /Users/chun/Projects/fe-monorepo/.yarn/cache/swiper-npm-9.0.2-c6984e9fe5-2715de6413.zip/node_modules/swiper/react/swiper.js)
해결방안
추측으로는 swiper 내부에서 react에 대한 dependency를 누락한 것으로 보인다.
별도로 설치해줄 수 있도록 .yarnrc.yml 에 아래내용을 추가했다.
packageExtensions:
  'swiper@*':
    dependencies:
      'react': '18.2.0'
참고
yarn berry & pnp 설명
https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-2-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A0%81%EC%9A%A9%EA%B8%B0-45f1ba67c24c
https://medium.com/wantedjobs/yarn-berry-%EC%A0%81%EC%9A%A9%EA%B8%B0-1-e4347be5987
의존성 문제 해결 방안
https://helloinyong.tistory.com/341 (제일 도움 많이됨)
https://woong-jae.com/projects/220711-pnp-dependency-error
https://github.com/styled-components/styled-components/issues/3082
nodeLinker 란?
https://yarnpkg.com/features/pnp

yarn berry 에서 swiper9.0 사용시 에러

댓글