导入React时服务器返回'text/html'类型MIME报错怎么解决？

错误根因 #

• 导入路径不符合浏览器原生ES模块规范：浏览器加载ES模块时仅识别完整的带后缀的文件路径，不会自动解析node_modules文件夹下package.json的入口字段，也不会自动补全.js后缀。你请求./node_modules/react路径时，静态服务器找不到对应JS文件，返回了默认的404 HTML页面，因此MIME类型为text/html，触发校验报错。
• 你观察到的无react.js文件是直接诱因：npm默认安装的React是CommonJS格式产物，没有暴露可直接被浏览器导入的单文件JS资源。

修复方法 #

你可以根据开发场景选择以下任意一种方案：

方案1：CDN引入（零配置快速可用） #

直接在HTML文件中引入React和ReactDOM的UMD格式资源，不需要写import语句，可直接使用全局React、ReactDOM变量：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

引入后删除JS代码前两行的import语句即可正常运行。另外要注意HTML中引入自定义JS时需要添加type="module"属性，示例如下：

<script src="./你的JS文件名.js" type="module"></script>

方案2：使用构建工具（长期开发推荐） #

标准React开发流程建议使用构建工具自动处理模块解析、格式转换，不需要手动写node_modules相关的导入路径。以Vite为例，在你的my-app文件夹下执行以下命令即可快速初始化可用的React项目：

npm create vite@latest . -- --template react
npm install
npm run dev

初始化完成后你直接写import React from 'react'即可，工具会自动处理路径问题。

方案3：手动引入ESM格式React文件 #

如果你一定要使用原生ES模块导入语法，可自行下载React的ESM格式单文件到项目目录，导入时写完整的相对路径即可，示例：

import React from './lib/react.esm.js'

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