vue3项目升级报错“[vite] : Failed to resolve import "@vue/server-renderer"

1,245 阅读1分钟

前言

最近打算对项目内的vite、vue 和 element-plus 版本升级, 安装完毕之后启动项目,结果不出意外的出意外了

error01.png

点进去看下怎么回事

error02.png

wtf.webp

根据警告和报错有点懵,看起来routerview有问题?然后顺势也吧vue-router也升级到最新,结果发现并没有用。没办法,逐个排查吧。

寻找原因

先回退版本,重新挨个升级看下报错情况,经过排查发现问题出在vite上,原来的vite版本是 2.5.4,升级到2.9+就又出现问题了

16:40:58 [vite] Internal server error: Failed to resolve import "@vue/server-renderer" from "src\App.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: F:/script_zhao/learning/vite-element-plus-zhao-template/src/App.vue
  12 |  });
  13 |  import { resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
  14 |  import { ssrRenderComponent as _ssrRenderComponent } from "@vue/server-renderer";
     |                                                             ^
  15 |  function _sfc_ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  16 |    const _component_router_view = _resolveComponent("router-view");
      at formatError (F:\script_zhao\learning\vite-element-plus-zhao-template\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39080:46)
      at TransformContext.error (F:\script_zhao\learning\vite-element-plus-zhao-template\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39076:19)
      at normalizeUrl (F:\script_zhao\learning\vite-element-plus-zhao-template\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:58354:26)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async TransformContext.transform (F:\script_zhao\learning\vite-element-plus-zhao-template\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:58503:57)
      at async Object.transform (F:\script_zhao\learning\vite-element-plus-zhao-template\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:39317:30)
      at async doTransform (F:\script_zhao\learning\vite-element-plus-zhao-template\node_modules\vite\dist\node\chunks\dep-c9998dc6.js:50037:29)

解决问题

既然找到一点眉目那就再查找一下关于vite的依赖项,其中一个官方插件 @vitejs/plugin-vue在GitHub仓库里看到有个关于更新依赖的提交,对照了下项目的版本似乎差了有亿点多,接着把它升级到最新,重启项目,成功!

success.png