Repl.it运行JS模块报application/json MIME类型错误及代码问题咨询

这个报错是因为你在ES模块中直接使用import语法导入JSON文件，没有指定模块类型，浏览器按照ES规范要求校验导入资源的MIME类型必须为JavaScript类型，而Repl.it静态服务器返回JSON文件的MIME类型是application/json，不符合校验要求，导致JS模块加载失败，所以你写的console日志都不会执行。

修复JSON导入问题即可解决该报错，使用标准的JSON模块导入语法，把原来的import myJson from './usage.json';替换为：

import myJson from './usage.json' assert { type: 'json' };

这个语法会明确告诉浏览器导入的是JSON模块，跳过JavaScript MIME类型校验。

1. 点击事件绑定错误
   你当前的事件监听写法是：

document.getElementById("sendBtn").addEventListener("click", clicked());

clicked()加了括号会在页面加载时直接执行函数，不是点击按钮时触发，需要改为：

document.getElementById("sendBtn").addEventListener("click", clicked);

2. Python代码无法触发执行
   你当前直接用AJAX请求${file}.py的地址，Repl.it的静态文件服务器只会返回Python文件的源码，不会运行代码。你需要将Repl.it项目调整为Python Web服务项目，使用Flask等框架编写接口，前端请求接口地址触发Python代码执行。

3. Python代码语法&逻辑错误

• 缺少json模块导入，首行需要加import json
• 文件打开模式错误，你用w模式打开文件会直接清空文件内容，后续json.load读取空内容会报错，正确的读写逻辑示例：

import json
print("runing nice!")
# 先读取文件内容
with open("usage.json", "r") as f:
    json_object = json.load(f)
# 修改后写入文件
json_object["test"] = "test"
with open("usage.json", "w") as f:
    json.dump(json_object, f)

4. 前端JSON值不会自动更新
   你首次导入的JSON是页面加载时的静态值，Python修改JSON文件后，前端不会自动同步更新，需要重新请求usage.json获取最新值。

内容的提问来源于stack exchange，提问作者Kaito