search

vbenjs / vue-vben-admin

A modern vue admin. It is based on Vue3, vite and TypeScript. It's fast！
https://vben.vvbin.cn/
MIT License
22.85k stars 6.24k forks source link

页面有icon组件时，热更新 出现 Cannot access 'Icon' before initialization错误 #1194

Closed Corgis closed 2 years ago

Corgis commented 2 years ago

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 Issue 将直接被关闭

描述 Bug

当组件中有引入 组件，修改页面中的随意内容 热跟新会报错 Cannot access 'Icon' before initialization 且热更新失败 要重新刷新页面

复现 Bug

随便找个有引入Icon的页面 然后修改内容保存，控制台可见错误

系统信息

glorydreamtop commented 2 years ago

480

有人问过这个问题，但凡你先搜搜历史issue

Corgis commented 2 years ago

480

有人问过这个问题，但凡你先搜搜历史issue

本人搜过也看到了一样的issue 是四月份被关闭的，那正常最新版本应该已经是合并了修复代码的，可这个问题还在复现 image 而且 如果你说的是这个解决方法的话 那是有问题的

anncwb commented 2 years ago

我在跟踪下，有复现步骤可以发给我下

Corgis commented 2 years ago

我在跟踪下，有复现步骤可以发给我下

Vben Admin下 功能 -->图标菜单， src\views\demo\feat\icon\index.vue文件随便改个内容再保存就会报错 热更新失效 报错如下： image

t596502 commented 2 years ago

更新最新版后我这边也出现了这个问题

mynetfan commented 2 years ago

请各位测试一下此commit：https://github.com/anncwb/vue-vben-admin/commit/5af452754b0567539e6ba6899ce91fa2914a4829 如果已解决，请帮忙主动关闭此Issue反馈 @t596502 @Corgis @glorydreamtop @ujn-bin

Corgis commented 2 years ago

感谢反馈，经测试已修复，关闭

1668535323 commented 2 years ago

感谢反馈，经测试已修复，关闭

能说下解决思路吗？精简版这个问题还在

doraemonxxx commented 2 years ago

The bug still occurred on my end when I saved BaseSetting.vue

Is there a workaround to fix the issue?

image

doraemonxxx commented 2 years ago

Thanks for the feedback, it has been fixed after testing, close

Can you tell me a solution? Lite version this problem still exists

I already fixed my issue. Pls, refer to the fix in #376 . If you found some abnormal behaviour after using the code. then remove it and wait for someone who knows more about vite or the author to fix the issue.

zam157 commented 1 year ago

我在更新后还是会有HMR问题. 仔细研究了一下发现作者在/@/components/Icon/index.ts中做了统一导出处理, 也就是把三个.vue文件引入到一个ts文件下统一导出. 

import Icon from './src/Icon.vue';
import SvgIcon from './src/SvgIcon.vue';
import IconPicker from './src/IconPicker.vue';

export { Icon, IconPicker, SvgIcon };

export default Icon;

这样做可能可以提升一些DX, 但是也导致了这个bug. 粗略看下来至少在我所使用的vite版本(2.5.10)下.vue文件还不能这样统一导出

似乎ts导出的操作和Icon组件里用到的某些vite 插件有冲突

解决办法也很简单, 找到所有import了这个ts导出的语句, 统一改成对.vue文件单独引入

例如:

import { Icon } from '/@/components/Icon'; 改为 import Icon from '/@/components/Icon/src/Icon.vue';