如何在客户端正确导入node_modules包并解决MIME类型报错

这个报错和你用默认导入还是import * as的写法没有关系，核心问题出在路径解析上：

• 浏览器加载ES模块时，会实打实按照你写的相对路径发请求找文件，根本不会自动去项目的node_modules目录里搜索npm包
• 你写的./@event-calendar/core路径，指向的是当前执行JS文件同级目录下的@event-calendar文件夹，这个位置根本没有对应的JS文件
• 服务端收到不存在的资源请求时，默认返回了HTML格式的404错误页，浏览器校验模块类型时发现拿到的是text/html而不是预期的JS脚本，就抛出了这个错误。

根据你项目的实际情况选对应的方案即可：

没有用Vite/Webpack/Rollup这类构建工具的纯静态项目 #

纯浏览器环境没法直接读取node_modules里的内容，手动处理文件路径即可：

1. 打开node_modules目录，找到@event-calendar/core、@event-calendar/time-grid两个包下dist目录里已经打包好的、供浏览器直接使用的JS文件
2. 把这两个文件复制到你自己项目存放静态资源的目录里，比如专门建个/static/vendor/文件夹放第三方依赖
3. 导入时写对文件的实际相对路径，必须补全.js后缀，示例：

import Calendar from './static/vendor/event-calendar-core.min.js';
import TimeGrid from './static/vendor/event-calendar-time-grid.min.js';

不要直接引用node_modules里的源文件，大部分npm包的源文件是CommonJS格式或者没经过浏览器兼容打包，直接用会触发其他语法错误。

用了前端构建工具的项目 #

Vite、Webpack这类工具自带node_modules依赖解析逻辑，不用写相对路径，直接写包名导入即可：

import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';

注意不要直接双击本地HTML文件用file协议打开页面，要通过构建工具启动的开发服务访问（比如执行npm run dev后打开本地服务地址），否则依赖解析还是会失效。

如果改完配置还是报错，直接打开浏览器开发者工具的「网络」面板，找到对应模块的请求：

• 如果响应内容是404提示页，说明路径还是写错了，对照文件实际存放位置调整路径即可
• 如果返回的是正确的JS内容还是报MIME错误，检查你用的静态服务配置，给.js后缀的文件加上Content-Type: application/javascript的响应头。

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