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

已于 2024-10-15 13:38:13 修改
阅读量9.8k 收藏 9
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Vue3+TypeScript 文章标签： vue.js javascript 前端 node.js
于 2022-10-13 13:31:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wzyleix97/article/details/127299395
本文介绍了一个Vue3结合Vite项目的版本冲突问题及解决过程。作者最初遇到难以解决的错误提示，通过排查发现是由Vite和@vitejs/plugin-vue版本不匹配引起。最终通过固定相关依赖版本解决了问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题

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+vite - 解决报错error when starting dev server: Error: Failed to resolve vue/compiler-sfc.（项目启动运行出错）
高级前端工程师
12-25 7725
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
vue3+vite - 解决报错error while updating dependencies:Error:EACCES:permission denied,mkdir ‘x‘（系统权限问题）
高级前端工程师
07-22 5094
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: Cannot read properties of null (reading ‘split‘)
stay hungry, stay foolish
02-29 3013
[vite] Internal Server Error: Cannot read properties of null (reading 'split')报错原因及解决方法
[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: [less] variable @color is undefined
最新发布
kindming的博客
06-05 262
vue3 vite 中使用Less变量时，报错：[vite] Internal server error: [less] variable @color is undefined
[vite] Internal server error: Failed to parse source for import analysis because the content contain
weixin_38331749的博客
08-16 1515
在搭建vue3项目环境时，启动项目，出现的报错，记录一下。
[vite] Internal server error: Failed to resolve import “D:/Program Files (x86)/星球项目/yupao-frontend/n
JEREMY的博客
05-10 5386
【代码】[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 5790
报错，少东西
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 - Element Plus 报错 Internal server error: failed to resolve import “element-plus/es“ from “x“, D
资深程序员
05-11 5172
vue3，element-plus，unplugin-vue-components，自动导入报错，自动引入报错，vue3+vite自动引入element组件出现错误，vite，webpack，如何解决这个问题，Internalservererror:failedtoresolveimport"element-plus/es"from"x",Doesthefileexist?，配置自动引入element组件控制台报错，Vue3+ElementPlus，vue3+vite如何实现自动引
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?
基于vite配置模块联邦（修改版本）
weixin_53094984的博客
04-30 1920
以下步骤重复三次（因为创建了三个项目，一个host端两个remote端，后面需要实现remote-host-vite既能加载、运行远程模块，又能提供远程模块）remote_app1：可以自定义，但在main.ts导入remote模块时要以该名称开头，再加上remote项目配置文件中暴露出的路径。关于remote_app1:'http://localhost:5173/dist/assets/remoteEntry.js'的解释。remote-host-vite：既能加载、运行远程模块，又能提供远程模块。
vue3 项目启动时vite版本问题报错
鹤渺的星球
04-17 6251
我是在项目迁移过程中遇到的这个问题，前提可以看下面这篇。
[vite] Internal server error: ..........the parser plugin: “optionalChainingAssign“.
努力飞起的菜鸟
04-16 2287
而Vite默认情况下不支持这种实验性语法。要解决这个问题，您可以在项目的根目录下创建一个名为。报错记录1： vue 开发赋值报错 老是忘记可选链不能赋值 哎，便于取值劫持非法空值问题；的文件，并配置Vite来启用相应的解析插件。这个错误表明您的代码中使用了。
[vite] Internal server error: Failed to resolve import
LD77547231的博客
08-24 5789
这一步是在vite的项目的文件中， 配置按需引入插件报错启动项目报错。
[vite] Internal server error:options.devServer.transformWidthEsBuild is not a function...
天渺(喵)工作室
09-11 1552
[vite] Internal server error:options.devServer.transformWidthEsBuild is not a function...
[vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate tra
Etc.End的博客
06-15 1万+
[vite] Internal server error: Codegen node is missing for element/if/for node. Apply appropriate transforms first.
[vite] Internal server error: Undefined mixin / Undefined variable. Vite+Vue3+TS+SCSS 全局样式引入出错解决方案
11-13 1万+
在使用Vue3 + Vite2开发过程中，使用了SCSS 以往在main.js使用引入全局样式表就可以了 @import './styles/mixins.scss'; 但是实操中得到了这样的一个错误 [vite] Internal server error: Undefined mixin. 4 │ @include flex-row-lc; 翻阅文档: https://vitejs.bootcss.com/config/#css-preprocessoroptions 得知需要通过..
vite2+vue3兼容性数据大屏工具：@jiaminghi/data-view
资源摘要信息:"jiaminghi/data-view数据可视化组件针对vite2和vue3的windows补丁" 描述中提到的知识点包括了在使用vite2和vue3框架开发时，如何通过安装和配置一个特定的npm包（@jiaminghi/data-view）来修复开发...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值