vite项目启动后访问报错:Cannot read properties of undefined (read ing getTokens")

前言

今天要给一个项目新增一个功能点,于是我同往常一样找到代码仓库地址,使用 git 拉取到我本地。然后 使用 pnpm install 进行项目依赖安装。本以为可以轻松的启动项目,正常开始开发任务。结果还没开始就卡住了,直接报错。谨以此篇记录自己的踩坑过程,也希望可以帮他到其他同学。

安装依赖

首先终端 cd 到项目根目录,正常执行 pnpm i 安装依赖包,速度很快,可以看到成功的安装好了所有依赖:

启动项目出现警告

安装好后,执行 pnpm dev 启动项目:

启动后可以看到有个提示: The following dependencies are imported but could not be reso lved (以下依赖项已导入,但无法解决)

仔细查看发现提示的是项目中 EMap.vueChartsHbar.vueChartsPie 等几个 .vue 文件。

找到其中对应 EMap.vue 文件打开看到对应代码:

这里引入了 echarts 包下的以下内容:

js 复制代码
import {GeoJSON} from 'echarts/types/src/coord/geo/geoTypes'
import {MapSeriesOption} from 'echarts/types/src/chart/map/MapSeries'

启动项目后访问报错

先不管上面的提示,我们直接浏览器访问试试,结果直接报错:

仔细观察发现报错的文件是 App.vueindex.ts 等我们源码文件。但是都是同样问题报错: Internal server error: Cannot read properties of undefined (read ing getTokens")

尝试解决

由于上面的报错提示很明显,内部服务器错误:无法读取 undefined 的属性(读取getTokens)。

那我直接全局搜搜看这个 getTokens 是什么东西,结果整个项目跟没没这个 getTokens,说明我们自己的源码根本没访问读取过 getTokens。 到这一步可以大概率的推算这个报错应该是那个依赖包的错误。

所以我把目光转移到了 echarts、这里我被刚开始启动时的警告给误导了,我以为是不能解析的警告导致后面访问时的报错。 所以我开始关注 echarts 依赖,进行版本降级。 尝试后发现启动时还是会出现警告:无法解析。

其实这个警告是可以忽略的,并不影响我们项目的启动。所以在反反复复降级升级 echarts 版本后未能解决报错问题。

初步解决

就在我百度无果、百思不得其解的时候,我仔细看看了报错信息

仔细观察发现报错导致是插件、而插件就是 eslint,所以我大概率感觉这个错误不出意外就是 eslint 导致的呀!

于是直接打开vite 配置文件,直接注释 vite.config.ts中的 eslint 配置:

果然,注释后启动访问,错误消失了!!!

接着尝试解决

注释这个 eslint 插件后错误消失,定位到了问题导致的原因。开始尝试修改@rollup/plugin-eslint版本

降级版本 pnpm i @rollup/plugin-eslint@8.0.1 -D,降级后发现问题解决。

最终解决

此时,我在想应该是 eslint 版本和 @rollup/plugin-eslint不兼容导致的错误,

先恢复 @rollup/plugin-eslint 版本: pnpm i @rollup/plugin-eslint@8.0.5 -D

然后降级 eslint 版本试试 pnpm i eslint@8.4.1 -D

修改前:

  • "@rollup/plugin-eslint": "^8.0.5",
  • "eslint": "8.28.0",

降级后:

  • "eslint": "8.4.1",

果然,将 eslint 降级到 8.4.1 报错即可解决,或者降级到 "eslint": "^7.32.0",总之 eslint 的版本不要太高!

其他启动问题

报错 Syntax Error: Error: No ESLint configuration found.

语法错误:错误:找不到ESLint配置

原因:

根目录缺少elsint 配置文件

总结

一些项目出现一些奇奇怪怪的错误时不要慌, 有的时候百度是没有相关内容的。所以一定一定要仔细观察报错信息,但是也要注意分辨错误信息。最后就是根据思路一步步尝试,大部分奇奇怪怪的错误基本上是依赖包版本的问题。

相关推荐
excel6 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手7 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户21411832636029 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep9 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo12 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒31 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用33 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react