类型错误：'application/json'不是有效的 JavaScript MIME 类型

Question

我正试图用以下语句将JSON文件导入JavaScript

import phone_numbers from "./phoneNumbers.json";

JavaScript文件作为一个模块加载到我的HTML文件中，如下

<script type="module" src="./scripts/main.js"></script>

当我查看页面时，我得到以下错误

TypeError: 'application/json' is not a valid JavaScript MIME type.

我试过像这个一样导入它

import phone_numbers from "./phoneNumbers.json" assert { type: "json" };

但是我得到以下错误然后

SyntaxError: Unexpected identifier 'assert'. Expected a ';' following a targeted import declaration.

如何将json文件正确导入JavaScript文件

提前感谢

Answer 1

有四个基本选项。

使用Node.js和CommonJS

const phone_numbers = require("./phoneNumbers.json");

由于您使用的是浏览器，因此这不是您的选择。

使用JSON模块

您需要支持所提出的JSON模块规范(如Node.js(和正确语法的东西：

import phone_numbers from "./phoneNumbers.json" assert { type: 'json' };

预处理JSON

像Webpack这样的工具可以处理import ... .json'语句，并将JSON绑定到应用程序中。

改为使用Ajax

const response = await fetch("/url/to/phoneNumbers.json");
const phone_numbers = await response.json();

您需要使用支持顶级await的东西，或者在async函数中移动代码。

Answer 2

您不能只将JSON文件导入为JS，而是必须使用JS代码从服务器手动加载它-使用XMLHttpRequest或更新的fetch-API。

许多web框架都包含了专门的HTTP客户端，使用框架功能，因此，如果您使用框架，请查看它们为您提供了什么。