IoTSharp前端VUE采用npm run build编译提示require() of ES Module 出错

IoTSharp前端代码在IoTSharp/ClientApp是采用VUE开发的代码,采用npm run build编译不通过,出现如下问题:

一、问题1:Error ERR_REQUIRE_ESM: require() of ES Module

IoTSharp前端代码ClientApp里用npm run build编译提示如下错语"The CJS build of Vite's Node API is deprecated. See https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. failed to load config from E:\IOT\IoTSharp\IoTSharp\ClientApp\vite.config.ts error during build: Error ERR_REQUIRE_ESM: require() of ES Module E:\IOT\IoTSharp\IoTSharp\ClientApp\node_modules\@iconify\utils\node_modules\package-manager-detector\dist\detect.mjs not supported. Instead change the require of E:\IOT\IoTSharp\IoTSharp\ClientApp\node_modules\@iconify\utils\node_modules\package-manager-detector\dist\detect.mjs to a dynamic import() which is available in all CommonJS modules.

这个错误表明在构建过程中,Vite 无法正确加载一个 ES Module(.mjs 文件),因为使用了 require(),而 ES Modules 不支持通过 require() 加载。

Vite 的 CJS 构建已被弃用,建议迁移到 ECMAScript Modules (ESM)。以下是两种解决方案:

1)解决方案:在 package.json 中添加 "type": "module"

在项目的 package.json 文件中添加 "type": "module",这会告诉 Node.js 将 .js 文件作为 ESM 处理:

复制代码
{
  "type": "module"
}

通过在 package.json 中添加 "type": "module" 或将 vite.config.ts 文件改名为 vite.config.mts,可以解决 Vite 的 CJS 构建弃用警告。通过动态导入 ES Modules、更新依赖项、清理和重新安装依赖、启用详细日志,通常可以解决 ERR_REQUIRE_ESM 错误。

二、问题2:vueSetupExtend is not a function

vite:config bundled config file loaded in 959.98ms +0ms failed to load config from E:\IOT\IoTSharp\IoTSharp\ClientApp\vite.config.ts error during build: TypeError: vueSetupExtend is not a function。

根据你的问题和提供的搜索结果,以下是解决 TypeError: vueSetupExtend is not a function 错误的详细步骤:

1)解决方案: 安装 vite-plugin-vue-setup-extend组件

错误信息表明 vueSetupExtend 被错误地导入或使用了。确保你正确导入了 vueSetupExtend 插件。根据搜索结果,vite-plugin-vue-setup-extend-plus 插件可能存在兼容性问题,建议使用 vite-plugin-vue-setup-extend

三、重新编译问题解决

相关推荐
FungLeo5 小时前
成为全栈·React 管理后台篇·总复盘:从“接口能调通”到“后台值得使用”
前端·react.js·前端框架·项目复盘·成为全栈
Csvn6 小时前
并发模式:让渲染学会排队、插队和让路
前端
可乐鸡翅yeah_6 小时前
新手梳理:M3U8 线上问题,哪些是前端锅,哪些是后端锅
前端·ios·音视频·实时音视频·m3u8·音视频在线播放
Flynt7 小时前
Linear 用 1000 个 PR 换掉 styled-components,我写了 200 个按钮,把这笔账复现了一遍
前端·css·preact
JavaGuide8 小时前
NVIDIA 又开源了!这次给 AI Agent 加上权限管控
前端·后端
excel8 小时前
prisma 如何处理数据库竞态
前端·数据库·后端
莪_幻尘9 小时前
Skill 体检:30 个 Skill 全凭感觉?体检器先自曝了 8 个“假 0 分
前端·人工智能·llm
风骏时光牛马9 小时前
AI模型综合能力评测:性能、指令遵循与多场景实测对比
前端
Frag0ut9 小时前
Chrome与Chromium内核浏览器在Windows 11上的新特性全景解析
前端·chrome·windows·web安全·chromium·gemini ai·playready drm
hiahiahia12310 小时前
实现完整 Tool Dispatcher
开发语言·前端