next.js module not found (module resolve 에러)

상황

../../.yarn/cache/keen-slider-npm-6.8.3-1dae0bc90d-b798545bd6.zip/node_modules/keen-slider/react.js:1:74
Module not found: Can't resolve 'react'
Did you mean './react'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/dayoung.kang/toss/frontend/services/homepage/src).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

Import trace for requested module:
./src/pages/main/components/review-section/ReviewSection.tsx
./src/pages/main/Main.tsx
./pages/index.ts

https://nextjs.org/docs/messages/module-not-found

error - Error: keen-slider tried to access react, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

keen-slider라는 패키지를 설치하고 keen-slider/react에서 모듈을 임포트했는데 react를 resolve할 수 없다고 나옴. 해당 패키지의 package.json 을 보니 react가 devDependency로만 설치되어 있고 peerDependency 정의가 없음.

해결방법

• yarn의 인터널 설정 파일인 .yarnrc.yml 에 아래처럼 추가해준다.

  packageExtensions:
    keen-slider@*:
      peerDependencies:
        react: "*"
        react-dom: "*"

Ref

• https://yarnpkg.com/configuration/yarnrc