에러발생
- JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.
- 이 에러는 TypeScript 프로젝트에서 JSX를 사용할 때 발생한다. TypeScript는 JSX 요소를 해석하기 위해 내부적으로 JSX.IntrinsicElements 인터페이스를 하고, 만약 React와 같은 라이브러리의 타입 정의가 프로젝트에 포함되어 있지 않다면, TypeScript는 JSX 요소의 타입을 결정할 수 없어 이런 에러를 발생시킨다
- Cannot find module 'react' or its corresponding type declarations.
- 이 에러는 'react' 모듈이나 해당 타입 선언 파일(*.d.ts)을 찾을 수 없을 때 발생한다. 이는 주로 react 패키지가 설치되지 않았거나, node_modules 폴더에 정상적으로 위치하지 않았을 때 나타난다
에러 발생 원인
문제는 node_modules의 경로 문제에서 비롯된 것으로 보인다. PNPM 패키지 매니저를 쓰면 기존 node_modules와 다른 방식으로 패키지를 저장하고 관리하는데 이 차이 때문에 때때로 호환성 문제나 모듈을 찾지 못하는 에러가 생길 수 있을 것 같다는 추측이다.
간단히 말해 PNPM은 패키지를 더 효율적으로 관리하기 위해 심볼릭 링크와 복잡한 구조를 사용하는데, 이것이 일부 도구나 스크립트가 기대하는 전통적인 node_modules 구조와 다를 수 있다. 이런 차이가 문제가 있일 수 있다고 생각하지만, 솔직하게 정확한 원인은 아직 확실치 않다.. (회사의 맥북에서는 잘 작동하는 반면, 집의 windows 데스크톱에서는 문제가 발생하고있다. 이 문제에 대해 더 깊이 분석할 필요가 있어 보인다.)
에러 해결 방법
에러 해결 방법으로, 우선적으로 패키지 매니저를 yarn으로 변경하는 방향을 선택다. 이 결정은 PNPM과 node_modules 간의 호환성 문제를 우회하여 프로젝트를 원활하게 진행하기 위한 임시 해결책으로 볼 수 있다. yarn을 사용하면, 기존의 node_modules 구조와 더 잘 호환되는 패키지 관리 방식을 통해, 발생한 에러를 신속하게 해결할 수 있다.
정리
해결 방법을 통해 단기적으로 문제를 해결할 수 있으며, 프로젝트의 진행을 지속할 수 있다. 하지만 장기적으로는 PNPM과 node_modules 간의 호환성 문제의 근본 원인을 파악하여, 더 지속 가능하고 근본적인 해결 방안을 모색하는 것이 중요하다. 이는 프로젝트의 안정성을 보장하고, 비슷한 문제가 재발하는 것을 방지하는 데 도움이 될 것이기 때문..
