tsconfig에서 allowSyntheticDefaultImports flug

react에서 json 파일을 import 해오는데 다음과 같은 에러가 났다.

Module '"/Users/heesun/Documents/salin/linker/linker-front-sender/src/pages/Main/briefer_intro"' can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259)
briefer_intro.json(1, 1): This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

 

하지만 이미 tsconfig.node.json파일에 ES모듈과 CommonJS 모듈을 호환해주는 allowSyntheticDefaultImports: true 로 되어있었다. 

 

allowSyntheticDefaultImports은 typescript 컴파일러 옵션 중 하나로, TypeScript가 **ES 모듈과 CommonJS 모듈을 호환하도록 도와주는 옵션이다. 이 옵션을 사용하면 CommonJS 모듈을 마치 ES6 모듈처럼 기본 import로 가져올 수 있다. (원래 CommonJS 모듈은 다른 모듈을 가져올 때 require 함수를 사용). 

하지만 일반적으로 CommonJS는 Node.js환경에서 사용하고 ES모듈은 브라우저와 Node.js모두 사용 가능하기에 import 구문을 사용하려는 것!

 

tsconfig.node.json에도 있지만 tsconfig.app.json에도 해당 플러그를 넣어야 하는 이유는 일단 둘이 include하고 있는 디렉토리가 다르고 (tsconfig.node.json은 [vite.config.ts], tsconfig.app.json은 ["src", "src/**/*.json"]) tsconfig.app.json은 애플리케이션에서 JSON 파일이나 CommonJS 모듈을 import 구문으로 가져올 때 필요하며, tsconfig.node.json은 빌드 도구 설정 파일이나 기타 Node.js 관련 코드에서 JSON 파일이나 CommonJS 모듈을 import 구문으로 가져올 때 필요하다!