在Vite+React+TypeScript中导入JSON时去除default包裹

在Vite+React+TypeScript项目中导入JSON文件时，已将tsconfig.json中的resolveJsonModule设为true，但JSON内容仍被包裹在default对象中，尝试访问default属性时还会触发类型错误：Property 'default' does not exist on type...。

相关代码示例 #

language.json

[
  {
    "name": "Afrikaans",
    "country": "za",
    "code": "af"
  }
  // ... 其他语言数据
]

App.tsx（原导入方式）

import * as languages from "./languages.json";

function App() {
  return <div className="App">{JSON.stringify(languages)}</div>;
}

export default App;

输出对比 #

• 预期输出：

[
  {
    "name": "Afrikaans",
    "country": "za",
    "code": "af"
  }
  // ... 其他语言数据
]

• 实际输出：

{
  "default": [
    {
      "name": "Afrikaans",
      "country": "za",
      "code": "af"
    }
    // ... 其他语言数据
  ]
}

解决方法 #

方法1：使用默认导入

直接通过默认导入获取JSON内容，无需处理default对象：

import languages from "./languages.json";

function App() {
  return <div className="App">{JSON.stringify(languages)}</div>;
}

export default App;

方法2：启用esModuleInterop

在tsconfig.json中添加或修改esModuleInterop为true，让TypeScript更好地兼容ES模块与CommonJS模块的导入方式：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    // ... 其他配置
  }
}

之后仍可使用import * as languages from "./languages.json"，此时languages.default即可正确访问JSON数组，同时类型错误也会消失。

内容的提问来源于stack exchange，提问作者Kim Joseph Penaloza