Laravel Nova更新依赖后组件渲染报错：TypeError: Cannot read '_c'

问题分析 #

这个错误的核心原因是Vue版本与Laravel Nova环境不兼容，或是构建工具配置未匹配Vue 2.7的新特性：

• 若使用Laravel Nova 4.x：Nova 4本身基于Vue 3构建，Vue 2.7编译的组件会生成依赖Vue 2实例方法（_c即Vue 2的createElement）的代码，在Vue 3环境下运行必然报错。
• 若使用Nova 3.x（Vue 2环境）：Vue 2.7对构建工具（如vue-loader）的版本要求有变化，旧配置会导致模板编译异常。

针对性解决方案 #

情况1：使用Laravel Nova 4.x（Vue 3环境） #

Nova 4不再支持Vue 2组件，需将组件迁移至Vue 3：

1. 卸载Vue 2相关依赖：

   npm uninstall vue vue-loader vue-template-compiler
   

2. 安装Vue 3及适配的构建依赖：

   npm install vue@^3.3.0 vue-loader@^17.0.0 @vue/compiler-sfc --save-dev
   

3. 修改webpack.mix.js配置，指定Vue 3版本：

   let mix = require('laravel-mix');
   
   require('./nova.mix')
   
   mix
     .setPublicPath('dist')
     .js('resources/js/tool.js', 'js')
     .vue({ version: 3 }) // 明确指定Vue 3
     .css('resources/css/tool.css', 'css')
     .nova('{{ name }}')
   

4. 调整组件代码适配Vue 3语法（选项式API仍可兼容，但需注意全局API变化，或直接迁移到组合式API）。
5. 清理缓存重新构建：

   rm -rf node_modules package-lock.json dist
   npm install
   npm run dev
   

情况2：使用Laravel Nova 3.x（Vue 2环境） #

需调整构建配置匹配Vue 2.7的要求：

1. 卸载冲突的vue-template-compiler（Vue 2.7已内置模板编译器，无需单独安装）：

   npm uninstall vue-template-compiler
   

2. 更新vue-loader到兼容Vue 2.7的版本：

   npm install vue-loader@^15.10.0 --save-dev
   

3. 修改webpack.mix.js，明确指定Vue 2版本，避免自动检测异常：

   let mix = require('laravel-mix');
   
   require('./nova.mix')
   
   mix
     .setPublicPath('dist')
     .js('resources/js/tool.js', 'js')
     .vue({ version: 2 }) // 明确指定Vue 2
     .css('resources/css/tool.css', 'css')
     .nova('{{ name }}')
   

4. 清理缓存重新构建：

   rm -rf node_modules package-lock.json dist
   npm install
   npm run dev
   

额外检查点 #

• 确认nova.mix.js中没有强制指定旧版本的Vue或构建依赖，避免覆盖你的配置。
• 检查组件入口文件（resources/js/tool.js），确保Vue的引入方式正确：

  // Vue 2.7
  import Vue from 'vue';
  // Vue 3
  import { createApp } from 'vue';
  

内容的提问来源于stack exchange，提问作者Ilya Pelevin