【Vite】Vite切换版本（Vite+vue3）报错 [vite] Internal server error: Cannot set property ‘id‘ of undefined

Vite版Vue问题
原创 已于 2024-10-15 13:38:13 修改 · 1w 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端 #node.js

于 2022-10-13 13:31:26 首次发布
本文介绍了一个Vue3结合Vite项目的版本冲突问题及解决过程。作者最初遇到难以解决的错误提示，通过排查发现是由Vite和@vitejs/plugin-vue版本不匹配引起。最终通过固定相关依赖版本解决了问题。

问题

Vue3+vite的项目，在全局安装新的Vite版本后，一直报下图错误。

报错信息

在这里插入图片描述
通过很多方式没有解决，最后发现是Vite版本的问题，因为Vue是从脚手架中引入的

import vue from '@vitejs/plugin-vue'

解决

查看package.json和package.lock.json区别

在这里插入图片描述

修改

将package.json中vite的版本号固定后，安装（npm install）发现仍有问题
在这里插入图片描述

最终解决

查看@vitejs/plugin-vue的版本

在这里插入图片描述

安装上图的@vitejs/plugin-vue的版本
npm install @vitejs/plugin-vue@1.4.0

在这里插入图片描述
在这里插入图片描述
问题解决~~

Vue3 - No known conditions for “./lib/locale/lang/zh-cn“ entry in “element-plus“ package（完美解决方案）
🏆 前端领域优质创作者
08-03 1万+
vue3-element-admin运行报错Noknownconditionsfor"./lib/locale/lang/zh-cn"entryin"element-plus"package，vue3vite项目npmrundev运行和npmrunbuild打包时报错Noknownconditionsfor"./lib/locale/lang/zh-cn"entryin"element-plus"package，vue3报错Noknownconditionsf
vue3+vite - 解决报错error when starting dev server: Error: Failed to resolve vue/compiler-sfc.（项目启动运行出错）
高级前端工程师
12-25 8032
vue3，vite，运行报错，error when starting dev server，Error: Failed to resolve vue/compiler-sfc.，vite项目运行出错，vue3启动报错，npm run dev，vue3+vite启动项目报错，yarn dev，安装项目依赖后运行报错，@vitejs/plugin-vue，vue3运行前端报错：error when starting dev server，使用vite创建项目，启动dev时报错，更新版本也不行，重新安装insta
[vite] Internal server error: Failed to parse source for import analysis because the content contain
weixin_38331749的博客
08-16 1824
在搭建vue3项目环境时，启动项目，出现的报错，记录一下。
vue3.2.X + Vite2.X + Pinia2.X的前端项目常见报错
listener_life的博客
05-25 9828
vue3.2.X + Vite2.X + Pinia2.X项目中，常见错误
nodejs 、 npm、vite的版本对应关系及创建一个指定版本的 Vite 项目
csdn_aspnet的专栏，请点击博客主页右上角三个点中的私信联系
09-12 2091
摘要：Node.js项目开发中需确保依赖版本兼容性，建议使用LTS版Node.js（14.18+）及配套npm。Vite作为前端构建工具，要求Node.js 14.18+，需配合Vue3使用。可通过nvm管理多版本Node.js，用npm create vite@<version>创建指定版本项目（如2.9.5）。安装时应检查Vite文档的版本要求，通过package.json的engines字段验证兼容性，推荐使用最新稳定版以获得最佳功能支持。
若依(ruoyi)前端Vue3 Element Plus Vite版样式修改
我这孩子从小记性就不好，什么东西都要写下来才放心
06-21 1万+
【代码】若依(ruoyi)前端Vue3 Element Plus Vite版样式修改。
[vite] Internal server error: Failed to resolve import “C:/Users/8D/Desktop/vue3/qywx-client/node_mo
qq_46199553的博客
06-27 1万+
vant遇到的前端问题
[vite] Internal Server Error: Cannot read properties of null (reading ‘split‘)
stay hungry, stay foolish
02-29 3291
[vite] Internal Server Error: Cannot read properties of null (reading 'split')报错原因及解决方法
[vite] Internal server error: Cannot read property ‘replace‘ of undefined vite-plugin-svg-icons
jonathan_joestar的博客
09-18 1955
【代码】[vite] Internal server error: Cannot read property 'replace' of undefined vite-plugin-svg-icons。
精选资源
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
精选资源
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
vue3+vite - 解决报错error while updating dependencies:Error:EACCES:permission denied,mkdir ‘x‘（系统权限问题）
高级前端工程师
07-22 5362
vue3，vite，报错，nuxt，权限，苹果mac系统，windows系统，vue3报错，vite报错，node，详细解决方法，教程，[vite] error while updating dependencies: Error:EACCES:permission denied,mkdir 'x'，更新依赖项时发生[vite]错误：错误：EACCES:权限被拒绝，mkdir，苹果mac系统加了sudo还是不行报错，运行报错，启动项目，run dev，创建项目，初始化，依旧不行怎么办，保权限没有问题，换了n
[vite] Internal server error: Failed to resolve import “D:/Program Files (x86)/星球项目/yupao-frontend/n
JEREMY的博客
05-10 5451
【代码】[vite] Internal server error: Failed to resolve import "D:/Program Files (x86)/星球项目/yupao-frontend/n。
报错 - [vite] Internal server error: [vue/compiler-sfc] Identifier ‘onMounted‘ has already been dec
weixin_42479421的博客
11-08 6037
报错，少东西
vue3解决：[vite] Internal server error: Preprocessor dependency “sass“ not found. Did you install it?
热门推荐
狮子座的男孩
06-25 1万+
【代码】vue3解决：[vite] Internal server error: Preprocessor dependency "sass" not found. Did you install it?
vue3 项目启动时vite版本问题报错
鹤渺的星球
04-17 6811
我是在项目迁移过程中遇到的这个问题，前提可以看下面这篇。
[vite] Internal server error: ..........the parser plugin: “optionalChainingAssign“.
努力飞起的菜鸟
04-16 2583
而Vite默认情况下不支持这种实验性语法。要解决这个问题，您可以在项目的根目录下创建一个名为。报错记录1： vue 开发赋值报错 老是忘记可选链不能赋值 哎，便于取值劫持非法空值问题；的文件，并配置Vite来启用相应的解析插件。这个错误表明您的代码中使用了。
[vite] Internal server error: Failed to resolve import
LD77547231的博客
08-24 6780
这一步是在vite的项目的文件中， 配置按需引入插件报错启动项目报错。
[vite] Internal server error:options.devServer.transformWidthEsBuild is not a function...
天渺(喵)工作室
09-11 1587
[vite] Internal server error:options.devServer.transformWidthEsBuild is not a function...
vue3 + vite 报错 Internal server error: Missing "./bin/jsencrypt.min" export in " jsencrypt" package
最新发布
11-04
<think>根据用户的问题，错误信息是：&#39;Internal server error: Missing "./bin/jsencrypt.min" export in "jsencrypt" package&#39;。这是在Vue3+Vite项目中遇到的错误。 从错误信息看，问题出在jsencrypt包上。Vite在构建过程中无法找到jsencrypt包中的"./bin/jsencrypt.min"导出。 参考引用[1]中提到的解决方案，类似的问题（Missing “./jsx-runtime.js”）是通过在vite.config.js中配置别名（alias）来解决的，强制将react指向项目node_modules中的同一版本。这里可以尝试类似的思路。 但是，用户的问题是关于jsencrypt包，因此需要具体分析： 1. 首先，检查jsencrypt包的安装情况。确保已经正确安装了jsencrypt包（通过npm或yarn）。 2. 其次，检查jsencrypt包的导出声明。在node_modules/jsencrypt/package.json中，查看"exports"字段或者"main"字段是否指定了正确的入口文件。 通常，这种错误是因为包的导出配置不符合ESM规范，导致Vite（基于ESM）无法正确解析。 解决方案可以有以下几种： **方案1：在vite.config.js中配置别名（alias）** 类似于引用[1]的方法，我们可以为jsencrypt包设置别名，直接指向具体的文件。 例如，如果jsencrypt包中实际存在`bin/jsencrypt.min.js`文件，我们可以这样配置： ```javascript // vite.config.js import { defineConfig } from &#39;vite&#39; import vue from &#39;@vitejs/plugin-vue&#39; import path from &#39;path&#39; export default defineConfig({ plugins: [vue()], resolve: { alias: { // 其他别名... &#39;jsencrypt&#39;: path.resolve(__dirname, &#39;node_modules/jsencrypt/bin/jsencrypt.min.js&#39;) } } }) ``` 这样，当代码中引入jsencrypt时，会直接指向这个具体的文件。 **方案2：检查jsencrypt的引入方式** 在代码中，我们可能是这样引入的： ```javascript import JSEncrypt from &#39;jsencrypt&#39; ``` 但是，根据错误信息，包缺少`"./bin/jsencrypt.min"`导出，说明包可能没有正确导出。我们可以尝试修改引入方式，直接指向具体文件： ```javascript import JSEncrypt from &#39;jsencrypt/bin/jsencrypt.min.js&#39; ``` 或者使用CommonJS的方式（如果允许）： ```javascript const JSEncrypt = require(&#39;jsencrypt/bin/jsencrypt.min.js&#39;) ``` 但是，在Vite项目中，通常推荐使用ESM，所以第一种方式可能更好。 **方案3：更新或更换包** jsencrypt包可能有多个版本，或者存在替代包（如`jsencrypt-esm`），它提供了ESM支持。可以尝试安装支持ESM的版本或替代包。 例如： ```bash npm install jsencrypt-esm ``` 然后在代码中引入： ```javascript import JSEncrypt from &#39;jsencrypt-esm&#39; ``` **方案4：在Vite中配置optimizeDeps（如果问题发生在开发服务器）** 有时，Vite的开发服务器需要对某些依赖进行预构建。我们可以尝试将jsencrypt添加到optimizeDeps中： ```javascript // vite.config.js export default defineConfig({ // ...其他配置 optimizeDeps: { include: [&#39;jsencrypt&#39;] } }) ``` **方案5：检查node_modules中jsencrypt包的文件结构** 确保在node_modules/jsencrypt目录下确实存在`bin/jsencrypt.min.js`文件。如果不存在，可能是包安装不完整，尝试重新安装。 **总结建议步骤：** 1. 确认node_modules中存在jsencrypt包，并且`bin/jsencrypt.min.js`文件存在。 2. 尝试在代码中修改引入方式：`import JSEncrypt from &#39;jsencrypt/bin/jsencrypt.min.js&#39;`。 3. 如果上一步不行，在vite.config.js中配置别名alias指向该文件（方案1）。 4. 如果还是不行，考虑使用替代包（如`jsencrypt-esm`）或者更新jsencrypt到最新版本。 5. 如果问题出现在开发环境，尝试配置optimizeDeps。 根据引用[1]的思路，配置别名是解决类似路径问题的一种有效方法，因此推荐优先尝试方案1或方案2。 最后，由于用户项目是Vue3+Vite，我们确保在vite.config.js中配置正确。 注意：在修改vite.config.js后，需要重启开发服务器。 希望这些解决方案能够帮助用户解决问题。 </think>### Vue3 + Vite 项目中 `Missing "./bin/jsencrypt.min" export in "jsencrypt" package` 错误的解决方案 这个错误通常是由于 `jsencrypt` 包的导出路径不符合 Vite 的 ESM（ES Module）规范导致的。以下是具体解决方案，按优先级排序： --- ### **方案1：修改导入路径（推荐）** 直接指定 `jsencrypt` 的完整文件路径： ```javascript // 原引入方式（可能出错）： import JSEncrypt from &#39;jsencrypt&#39; // 修改为： import JSEncrypt from &#39;jsencrypt/bin/jsencrypt.min.js&#39; ``` > ✅ **优点**：无需额外配置，修改简单 > ️ **注意**：确保项目中安装了 `jsencrypt`（`npm install jsencrypt`） --- ### **方案2：配置 Vite 别名（Alias）** 在 `vite.config.js` 中添加路径别名： ```javascript // vite.config.js import { defineConfig } from &#39;vite&#39; import vue from &#39;@vitejs/plugin-vue&#39; import path from &#39;path&#39; export default defineConfig({ plugins: [vue()], resolve: { alias: { // 其他别名... &#39;jsencrypt&#39;: path.resolve(__dirname, &#39;node_modules/jsencrypt/bin/jsencrypt.min.js&#39;) } } }) ``` > 🔧 **原理**：强制将 `jsencrypt` 指向具体文件 > 📌 **关键点**：需安装 `path` 模块（`npm install path`） --- ### **方案3：替换为 ESM 兼容包** 使用支持 ESM 的替代库（如 `jsencrypt-esm`）： ```bash npm uninstall jsencrypt npm install jsencrypt-esm ``` 代码中引入： ```javascript import JSEncrypt from &#39;jsencrypt-esm&#39; ``` --- ### **方案4：配置 Vite 的 `optimizeDeps`** 如果是开发环境报错，尝试预构建依赖： ```javascript // vite.config.js export default defineConfig({ optimizeDeps: { include: [&#39;jsencrypt&#39;] // 强制预构建 } }) ``` --- ### **根本原因分析** 1. **包导出问题** `jsencrypt` 的 `package.json` 未声明 ESM 入口文件，导致 Vite 无法解析默认导出[^1]。 ```json // node_modules/jsencrypt/package.json { "main": "bin/jsencrypt.min.js", // 未定义 exports 字段 } ``` 2. **Vite 的 ESM 要求** Vite 依赖严格的 ES Module 规范，而 `jsencrypt` 是 CommonJS 模块，需显式路径指定[^2]。 --- ### 相关问题 1. 如何检查第三方库是否兼容 Vite 的 ESM 规范？ 2. Vite 中如何处理其他 CommonJS 模块的兼容性问题？ 3. 除了别名配置，还有哪些方法优化 Vite 的依赖解析？ [^1]: 类似路径解析问题参考 Vite 别名配置方案 [^2]: ESM 与 CommonJS 模块差异导致的兼容性问题
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值