🤔 문제

• 컴포넌트 태그를 사용하는데 props 가 있어서 생기는 문제로 판단.

• 공식문서의 ts 그대로 해도 동일한 문제가 생긴다.

• https://www.npmjs.com/package/react-youtube

  

🌈 해결 과정

1. 동료의 도움

   캠퍼1 : “경일님 youtube 태그 처리에서 계속 에러가 나던 이유가 react-youtube 패키지 자체가 commonJS 형식으로 작성되어있어서, 태그를 module.export방식으로만 내보내가지고 es모듈하고 요구사항이 맞지 않아서 생기는 문제일 수도 있다고 하네욥”

2. 적용 및 해결

   tscongif.json 파일에 "allowSyntheticDefaultImports": true, or  "esModuleInterop": true, 추가 시 해결

   {
     "extends": "@packages/tsconfig/tsconfig.app.json",
     "compilerOptions": {
       "baseUrl": "./",
       "paths": {
         "@/*": ["./src/*"]
       },
       "esModuleInterop": true
     },
     "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
     "exclude": ["node_modules", "dist"],
   }
   

3. 정리

   "allowSyntheticDefaultImports": true,  "esModuleInterop": true,

   • 공통점: CommonJS 모듈과 ES6 모듈 간의 호환성을 개선하는 옵션
   • 차이점
     • allowSyntheticDefaultImports : 더 포괄적인 호환성 제공, require/export 모두 개선
     • esModuleInterop : 제한적 호환성 제공 (default import만 허용)

   결론: 둘 다 같은 기능인데 호환성이 좀 더 좋은 esModuleInterop 승!

4. 이유를 다시 찾아봄

   경일님 youtube 태그 처리에서 계속 에러가 나던 이유가 react-youtube 패키지 자체가 commonJS 형식으로 작성되어있어서, 태그를 module.export방식으로만 내보내가지고 es모듈하고 요구사항이 맞지 않아서 생기는 문제일 수도 있다고 하네욥

   '근데 요즘에 es 모듈를 지원안하는게 있나?'라는 생각에 다시 한번 찾아봤습니다.

   1. 일단 깃허브 문서를 보면 둘 다 지원을 한다고 나옵니다.

      

   2. 그럼 왜 esModuleInterop 속성없이는 안됐지?

   3. TypeScript가 특정한 조건에서 commonJS 형식으로 패키지를 처리할 때가 있다. 그래서 TypeScript가 default import 문법을 제대로 해석하지 못하기 때문에 esModuleInterop 옵션이 필요했던 것.

   • 결론: TS 문제였다.