React.js编译失败：模块未找到问题求助（附代码及报错详情）

问题概述 #

操作时触发编译失败，提示模块未找到，错误关联register/route.js和models/User.js文件。已排查并修正拼写、路径问题，但故障仍存在。

报错截图 #

• 核心编译错误：
• 文件关联错误：

涉事文件代码 #

register/route.js #

import mongoose from "mongoose";

import {User} from "@/models/User";

export async function POST(req){
const body = await req.json();
mongoose.connect(process.env.MONGO_URL);
const cretedUser = await User.create(body);
return Response.json(createdUser);
}

models/User.js #

import {model, models, Schema} from "mongoose";

const UserSchema = new Schema({
email:{type:String, required:true, unique: true},
password:{
    type:String, 
    required: true, 
    validate: pass => {
    if(!pass?.length || pass.length <5 ){
        new Error('password must be at least 5 characters');
    }
},
},
},{timestamps: true}); 

export const User = models?.User || model('User', UserSchema);

仓库结构 #

排查修复步骤 #

1. 修正文件夹大小写匹配：从代码和结构来看，User模型文件放在Model文件夹下，但register/route.js中导入路径是@/models/User——Linux/macOS系统文件系统区分大小写，这会直接导致模块找不到。将Model文件夹重命名为models（全小写），保持和导入路径一致。

2. 确认根路径别名配置：Next.js中@作为根路径别名需要手动配置，检查项目根目录下的jsconfig.json或tsconfig.json是否有如下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

如果没有，添加该配置后重启开发服务器。

3. 修正变量拼写错误：register/route.js里的cretedUser是拼写错误，应改为createdUser，避免后续运行时出现未定义变量错误。

4. 重启开发服务器：修改文件夹名或配置文件后，必须重启开发服务器，确保变更生效。

5. 验证依赖安装：执行npm install mongoose重新安装mongoose依赖，排除依赖缺失或损坏的可能。

内容的提问来源于stack exchange，提问作者Gia Khánh Lê