LeeHyoGeun

error TS1343: The 'import.meta' meta-property is only allowed when the '--module' option is 'es2020', 'es2022', 'esnext', 'system', 'node16', or 'nodenext'.

'import.meta' 메타 속성은 '--module' 옵션이 'es2020', 'es2022', 'esnext', 'system', 'node16' 또는 'nodenext'인 경우에만 허용됩니다.ts(1343)

이 에러가 나왔을 때 구글에 검색을 해 보아도 이상한 답변 (jest를 깔아 설정을 한다) 등이 있어서 시간을 아주 살짝 날리고

점점 똑똑해지고 있는 gpt에게 물으니 해결이 됐다

ai 없이 공부를 어떻게 했었나 모르겠다

방법은 tsconift.json에 있는 몇가지를 건드려 주면 되는데

{
  "compilerOptions": {
    "target": "esnext", // 또는 es2020
    "module": "esnext", // 또는 es2020
    "moduleResolution": "node",
    "jsx": "react-jsx", // React 17 이상을 사용할 경우
    // "jsx": "react" // React 16 이하를 사용할 경우
    ...
  }
}

아래처럼 변경해 주면 된다. 이유는 주석에 있는 것과 같다

그리고 수정 후 해결된 이유도 물어 봤는데

1. moduleResolution의 역할

moduleResolution 옵션은 TypeScript가 모듈을 찾는 방법을 결정합니다. 이 설정이 올바르게 설정되지 않으면 TypeScript가 필요한 모듈을 찾지 못해 오류가 발생할 수 있습니다. 주로 두 가지 방식이 있습니다:

• node: Node.js 스타일의 모듈 해석 방식을 사용합니다. 이 방식은 Node.js에서 사용하는 모듈 시스템과 유사하게 작동합니다. 모듈의 경로를 상대적으로 찾거나 node_modules 디렉터리에서 찾아갑니다.
• classic: TypeScript의 이전 모듈 해석 방식을 사용합니다. 일반적으로 ES6 이전의 방식을 따릅니다.

결론

moduleResolution을 node로 설정함으로써 TypeScript가 Node.js의 모듈 해석 방식을 따르도록 하여, Vite와의 호환성을 높이고 필요한 모듈을 제대로 찾을 수 있게 되었기 때문에 문제가 해결되었습니다.

2. 수정 후 해결된 이유

수정한 후, 설정이 다음과 같이 변경되어 TypeScript가 React와 Vite의 구조를 이해하게 되었습니다.

• target: esnext로 설정함으로써 최신 JavaScript 기능을 사용할 수 있게 되었습니다.
• module: esnext로 설정하여 Vite가 요구하는 ES 모듈 방식을 지원하게 되었습니다.
• jsx: react-jsx로 설정하여 React의 JSX 문법을 올바르게 처리할 수 있게 되었습니다.

와 같다고 한다. 

vite는 최신의 javascript를 요구하는 것 같다

마지막으로 .eslintrc.ts의 값도 수정해주었다

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'ESNext',
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    // 여기에 프로젝트에 맞는 규칙을 추가하세요.
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};