인프런 커뮤니티 질문&답변

안녕하세요 제로초님 강의 잘 보고 있습니다.

카카오 로그인을 구현하는 중에 문제가 생겨 어찌해서 해결했는데 해결된 이유가 궁금해서 질문드립니다!

1. 에러로그

TypeError: queryString.stringify is not a function 이라는 에러가 나서 찾아보니 query-string 버전 충돌이 있는 것 같아 query-string을 @7.1.3 버전으로 설치하니 해결이 되었습니다.

• pnpm-locl.yml을 보니 query-string을 아래와 같이 두 버전을 같이 쓰고 있었습니다.

   

  
    query-string@7.1.3:
      dependencies:
        decode-uri-component: 0.2.2
        filter-obj: 1.1.0
        split-on-first: 1.1.0
        strict-uri-encode: 2.0.0
  
    query-string@9.2.0:
      dependencies:
        decode-uri-component: 0.4.1
        filter-obj: 5.1.0
        split-on-first: 3.0.0
  

2. 사용하고 있는 패키지들

1) @react-native-kakao/core

@react-native-kakao/core@2.4.0(expo@53.0.10(@babel/core@7.27.4)(@expo/metro-runtime@5.0.4(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0)))(react-native-webview@13.13.5(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0))(react-native@0.79.2(@babel/core@7.27.4)(@types/react@19.0.14)(react@19.0.0))(react@19.0.0)':
    dependencies:
      crypto-js: 4.2.0
      query-string: 9.2.0
      react: 19.0.0

2) @react-navigation

  '@react-navigation/core@7.10.0(react@19.0.0)':
    dependencies:
      '@react-navigation/routers': 7.4.0
      escape-string-regexp: 4.0.0
      nanoid: 3.3.11
      query-string: 7.1.3

위의 에러로그에서와 같이 tab layout에 접근하려 할 때 react-navigation의 getPathFromState.js에서 query-string의 import에서 문제가 발생하는 것 같았는데 정확히 어떤 문제인지 잘 모르겠네요..

lockfile과 node_modules를 삭제해도 동일하게 query-string은 두가지 버전으로 설치되었고 만약 package.json에 query-string을 7버전으로 명시적으로 설치하지 않으면 탭 레이아웃의 모든 페이지들에서 저 오류가 납니다.

일단 query-string 패키지 설치를 해서 오류를 해결하긴 했지만 정확한 이유를 모르겠어서 질문드립니다 !

아래는 GPT에게 질문시 답변한 내용입니다.

GPT 답변 내용

• query-string@9.x는 ESM-only라서 CommonJS 방식의 import (import * as queryString) 시 undefined가 반환됨

• React Navigation 내부의 getPathFromState.ts에서 queryString.stringify(...) 호출 시 에러 발생

• 의존성 충돌로 인해 런타임 크래시가 발생하는 것으로 보임

❓질문드리고 싶은 점

1. 이러한 충돌을 예방하기 위한 공식적인 방법은 무엇인가요? (예: pnpm.overrides로 강제 버전 고정)

2. 혹시 다른 라이브러리에서도 이와 같은 ESM-CJS 충돌을 방지하기 위한 일반적인 best practice가 있을까요?
   
   // package.json

"dependencies": {
    "@expo/vector-icons": "^14.1.0",
    "@react-native-async-storage/async-storage": "2.1.2",
    "@react-native-kakao/core": "^2.4.0",
    "@react-native-kakao/user": "^2.4.0",
    "@react-navigation/bottom-tabs": "^7.3.10",
    "@react-navigation/elements": "^2.3.8",
    "@react-navigation/native": "^7.1.6",
    "@rneui/themed": "4.0.0-rc.8",
    "@supabase/supabase-js": "^2.49.9",
    "expo": "~53.0.9",
    "expo-blur": "~14.1.4",
    "expo-build-properties": "~0.14.6",
    "expo-constants": "~17.1.6",
    "expo-dev-client": "~5.1.8",
    "expo-font": "~13.3.1",
    "expo-haptics": "~14.1.4",
    "expo-image": "~2.1.7",
    "expo-linking": "~7.1.5",
    "expo-router": "~5.0.6",
    "expo-splash-screen": "~0.30.8",
    "expo-status-bar": "~2.2.3",
    "expo-symbols": "~0.4.4",
    "expo-system-ui": "~5.0.7",
    "expo-web-browser": "~14.1.6",
    "query-string": "^7.1.3",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-native": "0.79.2",
    "react-native-gesture-handler": "~2.24.0",
    "react-native-reanimated": "~3.17.4",
    "react-native-safe-area-context": "5.4.0",
    "react-native-screens": "~4.11.1",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-web": "~0.20.0",
    "react-native-webview": "13.13.5",
    "zustand": "^5.0.5"
  },