Vite+React组件重命名后仅临时生效,刷新失效求助
React + Vite + tw-elements 组件渲染异常问题
问题现象
- 基于tw-elements、Tailwind CSS与Vite开发React项目,创建了
Carouselhead组件。组件原本运行正常,但重启开发服务器后,页面显示空白图片,控制台无任何报错;拖动图片区域时能确认图片已导入,但未在页面正常渲染。 - 将组件名称修改为
Carouselheax这类变体后,组件可正常显示,但刷新页面后,会因不存在对应导出名称导致页面空白。另一组件也出现完全相同的问题。
当前Vite配置
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vitejs.dev/config/ export default defineConfig({ plugins: [react( {include: "**/*.jsx",} )], })
效果对比
- 重命名前效果:

- 重命名后效果:

已排查操作
- 检查导入名称大小写,确认完全匹配
- 尝试禁用HMR(热模块替换),问题仍未解决
- 推测问题与HMR相关:使用不存在的组件名时,只有手动刷新页面才会抛出导出不存在的错误
内容的提问来源于stack exchange,提问作者Yash Singh
相关产品推荐
相关产品推荐

