TypeScript 5.3의 Import Attributes와 번들러 호환성 문제

문제 상황

12월에 TypeScript 5.3으로 업그레이드하면서 Import Assertions가 Import Attributes로 변경되었다. JSON 파일을 import할 때 기존 assert 키워드가 deprecated되고 with 키워드를 사용하도록 바뀌었다.

// 기존 (deprecated)
import data from './config.json' assert { type: 'json' };

// 변경
import data from './config.json' with { type: 'json' };

문제는 Webpack 5.89에서 이 문법을 완전히 지원하지 않는다는 점이었다. 빌드는 통과하지만 런타임에서 JSON 파일이 제대로 로드되지 않았다.

해결 과정

1. Webpack 설정 조정

experiments.topLevelAwait와 module.parser 설정을 추가했다.

// webpack.config.js
module.exports = {
  experiments: {
    topLevelAwait: true
  },
  module: {
    parser: {
      javascript: {
        importAssertions: true
      }
    }
  }
};

2. 타입 정의 보완

JSON 모듈에 대한 타입 정의가 필요했다.

// global.d.ts
declare module '*.json' {
  const value: any;
  export default value;
}

3. 임시 회피 방안

당장 프로덕션 적용이 급하지 않아서 assert 문법을 유지하고, TypeScript 컴파일러 경고만 억제하는 방식으로 우선 진행했다.

// @ts-expect-error: TS2821
import data from './config.json' assert { type: 'json' };

결론

Vite는 5.0부터 Import Attributes를 잘 지원하지만, Webpack은 아직 완전하지 않다. 레거시 프로젝트에서는 번들러 업그레이드를 먼저 고려해야 할 것 같다. 2024년 상반기에는 Webpack 6나 Vite 마이그레이션을 검토할 예정이다.