Next.js启动时出现多模块相关报错，寻求解决方法

报错详情 #

1. SWC模块解析错误：

⨯ ./node_modules/@swc/helpers/esm/_interop_require_wildcard.js
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/@swc/helpers/esm/_interop_require_wildcard.js
./node_modules/next/dist/client/app-index.js

2. React模块文件缺失：

Module not found: C:\Projects\TodolistByDay\frontend\node_modules\next\dist\compiled\react\package.json (directory description file): ...

3. 目录读取权限错误：

Error: EISDIR: illegal operation on a directory, read
    at _0x4fdcb3.read (c:\Users\Destr\.vscode\extensions\wallabyjs.console-ninja-1.0.292\out\buildHook\index.js:1144:70286)

4. Webpack缓存警告：

[webpack.cache.PackFileCacheStrategy] Restoring pack failed from C:\Projects\TodolistByDay\frontend\.next\cache\webpack\client-development.pack.gz: Error: incorrect header check ...

已尝试的无效方法 #

• 删除node_modules文件夹后执行 npm i
• 删除.next缓存文件夹后执行 npm run dev
• 将package.json中的next包从14.1.0升级至14.1.4
• 更新报错相关模块

解决思路与方案 #

• 彻底清理缓存与依赖残留
  • 执行 npm cache clean --force 清理npm全局缓存
  • 删除项目根目录下的package-lock.json（或yarn.lock）文件，再重新执行npm install
• 排查VSCode插件干扰
  • 第三个报错明确指向wallabyjs.console-ninja插件，暂时禁用该插件后重启VSCode和项目，验证是否解决EISDIR错误
• 检查文件系统权限
  • 确保项目目录及子文件夹拥有读写权限，避免因权限不足导致依赖文件损坏或缓存写入失败
• 调整Next.js版本
  • 尝试降级到14.1.0之前的稳定版本（如14.0.4），或直接升级至最新稳定版，排除版本兼容性问题
• 验证Node.js版本
  • 确认本地Node.js版本符合Next.js 14.x的官方要求（推荐18.17.0+或20.6.0+），版本不匹配可能导致依赖安装异常
• 重新初始化项目（极端情况）
  • 若上述方法均无效，可能是本地项目文件损坏，尝试重新克隆仓库或新建Next.js项目后迁移代码

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