next js 에서 사용시

[hanhyung6376]

build 환경에서는 잘 되는데 dev 환경에서는 다음과 같이 나오네요 ㅠㅠ

Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'Postcode')

Call Stack eval node_modules/react-daum-postcode/lib/loadPostcode.js (1:194) b.componentDidMount node_modules/react-daum-postcode/lib/DaumPostcode.js (1:5913) invokeLayoutEffectMountInDEV node_modules/react-dom/cjs/react-dom.development.js (25023:0) invokeEffectsInDev node_modules/react-dom/cjs/react-dom.development.js (27304:0) commitDoubleInvokeEffectsInDEV node_modules/react-dom/cjs/react-dom.development.js (27280:0) commitRootImpl node_modules/react-dom/cjs/react-dom.development.js (26839:0) commitRoot node_modules/react-dom/cjs/react-dom.development.js (26638:0) performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (26073:0) flushSyncCallbacks node_modules/react-dom/cjs/react-dom.development.js (12009:0) eval node_modules/react-dom/cjs/react-dom.development.js (25607:0)

[jake-at-Miatrading]

저도 한참을 삽질하다가 알게됐는데 dev 환경에서만 그러네요 ㅠㅠ

[kmsbernard]

안녕하세요! 이슈 제보해주셔서 감사합니다. 아무래도 SSR 환경에서 문제가 발생할 수 있어보여서, 간단하게 버그픽스가 가능할지 찾아보겠습니다.

[Normaltic]

안녕하세요!

일단, DaumPostcode 컴포넌트는 마운트 시점에, 다음 우편번호 스크립트를 동적으로 로드하고, 완료가 되면 초기화를 진행합니다. 해당 에러는 이 과정 중에 문제가 있어서로 파악하고 있습니다. 또한, 복수사용에 대한 고려를 하지 않아서, 여러개의 DaumPostcode 컴포넌트를 동시에 출력할 때에도 발생할 수 있습니다.

일단, 컴포넌트가 마운트 되기 전에 미리 다음 우편번호 스크립트를 별도로 로드 해두시면 임시 조치가 가능하실 것 같고, 픽스 가능한 방향을 체크해 보겠습니다.

[hanhyung6376]

리액트 버전을 18에서 17.0.2 버전으로 낮추어서 해결했습니다!

[Normaltic]

안녕하세요!

"next": "12.1.6", "react": "18.1.0", 환경에서 동일한 증상 구현하였습니다. React 18 에서 SSR 에 대한 로직이 변경되어, SSR 개발 환경에서 랜더링이 두 번 되는것을 확인했는데요. 이전 코멘트에서 말씀드렸듯이 복수개의 컴포넌트 동시 랜더링이 고려되지 않았는데, 두 번 랜더링을 하며 오류를 유발하는 것으로 판단했습니다.

v3.0.3 배포로 스크립트 동적 로드 방식이 수정되어, 해당 증상이 해결됫 것으로 보여요.

단, 개발 환경에서 Cannot read properties of null (reading 'document') 로그는 계속 출력 될텐데요. 이건 SSR 환경은 nodejs 이라, 어떤 속성이 존재하지 않기 때문이 아닐까 싶습니다. 다음 우편번호 서비스에서 오류에 대한 핸들링 방법을 제공하지 않아 당장은 처리하기 힘들 것 같습니다. 추후에 SSR 관련이나 오류 핸들링 관련하여 더 고려해 보겠습니다.

[aziyatali]

@Normaltic Hello, I was wondering whether rendering twice in SSR environment has yet been resolved? Thanks

[Normaltic]

안녕하세요! 위에서 얘기한 로그 출력은, SSR 환경이 아닌 react@18 이상의 StrictMode 환경에서 발생하는 것으로 확인했습니다. 3.1.3 릴리즈로 더이상 오류가 출력되지 않습니다. 확인 후 추가적인 문제가 발생한다면, 이슈 부탁드립니다.

@aziyatali hi! Thank you for using our library. This issue has been confirmed to be unrelated to SSR. Occurs when StrictMode is enabled in react@18 and higher. This issue has been fixed in 3.1.3. If you have additional issues, please create an issue. Thanks.