使用Parcel构建JS MVC项目时，导入createAccount类遇模块找不到错误

针对你遇到的Parcel导入createAccount类时的模块找不到错误，给出以下排查和解决步骤：

1. 清理Parcel缓存 #

Parcel的缓存文件损坏是引发这类奇怪哈希模块名错误的常见原因，直接删除缓存和打包产物：

rm -rf .parcel-cache dist

然后重新启动开发服务：

parcel index.html # 替换成你的实际入口文件

2. 校验文件路径与大小写 #

确认controller.js中的导入路径完全匹配文件实际位置：

import { createAccount } from "./views/createAccView.js";

注意文件名的大小写（Linux/macOS系统对文件名大小写敏感），检查views文件夹下的文件名是否确实是createAccView.js，有没有拼写错误。

3. 修复类中的语法错误 #

你的createAccView.js里存在一个明显的语法错误，会导致Parcel编译异常：

// 错误写法：直接对DOM元素调用trim
const nameArr = this.#fullName.trim(" ").split(" ");
// 正确写法：先取input的value再处理
const nameArr = this.#fullName.value.trim().split(" ");

this.#fullName是获取到的DOM输入框元素，需要先访问value属性拿到输入的字符串，再进行trim和split操作。这个错误可能导致Parcel编译失败，进而触发热更新时的模块找不到问题。

4. 排查热模块替换(HMR)问题 #

如果以上步骤都无效，可能是Parcel的HMR功能出了问题：

• 尝试禁用HMR启动服务：

parcel index.html --no-hmr

• 如果禁用后恢复正常，建议更新Parcel到最新版本：

npm install parcel@latest

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