Vue3+Vuetify+Laravel项目出现‘camelize is not a function’错误求助

问题重现 #

使用VueJS、Vuetify和Laravel构建Web应用时，执行npm run build过程正常，但切换回npm run dev时弹出以下错误：

Uncaught TypeError: camelize is not a function
    at expand_transition_default (expand-transition.ts:16:26)
    at index.ts:26:82

未主动使用camelize函数，不清楚错误原因。

解决方案 #

这个错误源于Vuetify内部依赖的Vue工具函数未正确加载，大概率是依赖缓存冲突、版本不匹配或构建配置问题，按以下步骤排查修复：

• 彻底清理依赖与构建缓存

  1. 删除node_modules目录、package-lock.json（或yarn.lock）文件
  2. 执行npm install（或yarn install）重新安装依赖
  3. 清理Vite构建缓存：运行npm run dev -- --clean，或手动删除项目根目录下的node_modules/.vite文件夹

• 检查Vuetify与Vue版本兼容性
  打开package.json，确认Vuetify版本和Vue版本匹配：

  • Vuetify 3.x要求Vue 3.2.0及以上版本
  • 如果版本不匹配，调整版本号后重新执行npm install

• 验证Vuetify初始化配置
  检查resources/js/plugins/vuetify.ts（或对应初始化文件）的配置是否正确，确保完整导入Vuetify的组件和指令：

  import 'vuetify/styles'
  import { createVuetify } from 'vuetify'
  import * as components from 'vuetify/components'
  import * as directives from 'vuetify/directives'
  
  export default createVuetify({
    components,
    directives,
  })
  

• 检查Vite配置（Laravel Vite环境）
  确认vite.config.js中正确集成了vite-plugin-vuetify：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vuetify from 'vite-plugin-vuetify';
  
  export default defineConfig({
    plugins: [
      laravel({
        input: ['resources/css/app.css', 'resources/js/app.js'],
        refresh: true,
      }),
      vuetify({ autoImport: true }),
    ],
  });
  

  若未安装vite-plugin-vuetify，执行npm install vite-plugin-vuetify --save-dev补充安装

内容的提问来源于stack exchange，提问作者SINEAD AJAX