Vue 模板编译错误，“无法读取未定义的属性（读取'_c'）”

Question

我正在努力使用 Laravel Nova 作为管理面板向现有 Laravel 应用程序添加自定义工具。使用“php artisan nova：工具供应商/名称”创建的自动生成工具似乎无法开箱即用。它显示在 Nova 菜单中（将其添加到 NovaServiceProvider.php），但是当我打开它时，没有任何呈现，并且浏览器控制台返回此错误。

我得到的确切堆栈跟踪和错误是：

runtime-core.esm-bundler.js:226 TypeError: Cannot read properties of undefined (reading '_c')
at Proxy.render (admin-agenda:142:22)
at Wn (runtime-core.esm-bundler.js:816:16)
at Ee.fn (runtime-core.esm-bundler.js:5701:46)
at Ee.run (reactivity.esm-bundler.js:178:19)
at R.e.update (runtime-core.esm-bundler.js:5814:51)
at R (runtime-core.esm-bundler.js:5822:5)
at D (runtime-core.esm-bundler.js:5612:5)
at B (runtime-core.esm-bundler.js:5565:9)
at y (runtime-core.esm-bundler.js:5040:11)
at Ee.fn (runtime-core.esm-bundler.js:5708:11)

这似乎是一个非常普遍的错误，通常与 vue、vue-loader 和 vue-template-compiler 版本不匹配有关。为了测试目的，我已将 Tool.vue 组件最小化到最低限度。

当前工具.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    };
  }
};
</script>

这是工具中的 package.json：

  "devDependencies": {
    "laravel-mix": "^6.0.13",
    "postcss": "^8.3.11",
    "vue": "^2.6.12",
    "vue-loader": "^15.10.2",
    "vue-template-compiler": "^2.6.12"
  }

VS 父项目中的 package.json：

    "devDependencies": {
        "@babel/preset-typescript": "^7.22.5",
        "@tailwindcss/forms": "^0.5.3",
        "@types/jquery": "^3.5.16",
        "autoprefixer": "^10.4.0",
        "axios": "^0.25",
        "cross-env": "^7.0.3",
        "jquery": "^3.6.0",
        "laravel-mix": "^6.0.13",
        "laravel-mix-purgecss": "^6.0.0",
        "lodash": "^4.17.21",
        "postcss": "^8.4.4",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.49.9",
        "sass-loader": "^12.6.0",
        "select2": "^4.1.0-rc.0",
        "tailwindcss": "^3.3.1",
        "ts-loader": "^9.4.4",
        "typescript": "^5.1.6",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "vuelidate": "^0.7.6",
        "webpack-livereload-plugin": "^1.2.0"
    },
    "dependencies": {
        "@tinymce/tinymce-vue": "^3.2.8",
        "cropperjs": "^1.5.11",
        "json-logic-js": "^2.0.0",
        "mix": "^0.0.1",
        "moment": "^2.29.1",
        "slick-carousel": "^1.8.1",
        "smoothscroll": "^0.4.0",
        "tinymce": "^5.7.0",
        "v-toaster": "^1.0.3",
        "vue-meeting-selector": "^1.1.3",
        "vue-select": "^3.16.0",
        "vue-sweetalert2": "^5.0.2",
        "vue2-datepicker": "^3.9.0",
        "webpack": "^5.77.0"
    }

我尝试过的事情

• 将所有内容更新到最新版本，大部分情况都破坏了项目，并且似乎比解决此错误需要更多工作。
• 将每个匹配的依赖项放在同一版本中，似乎没有太大变化。
• 删除node_modules并重新安装npm
• 删除vendor和composer重新安装
• 将 VueLoaderPlugin 添加到 webpack.mix.js

我尝试了更多的事情，但在我看来，这些是最明显的事情。

提前致谢！

Answer 1

您遇到的错误通常表示 Vue.js 版本或 Vue.js 构建设置不匹配或存在问题。

鉴于问题出在 Laravel Nova 工具中，请确保您使用的是与 Laravel Nova 兼容的 Vue.js 版本。您应该检查 Laravel Nova 版本及其 Vue.js 要求或建议。

以下步骤可帮助解决该问题：

1. 检查 Laravel Nova 兼容性：确保您使用的 Vue.js 版本与您安装的 Laravel Nova 版本兼容。检查 Laravel Nova 文档以获取版本兼容性详细信息。

2. 检查 Vue.js 版本：确保工具的

   package.json

   中的 Vue.js 版本与父项目中使用的 Vue.js 版本匹配。版本的一致性至关重要。

3. Vue Loader Version：验证 Laravel Nova 工具和主项目中的

   vue-loader

   版本是否匹配。加载器中的不兼容可能会导致问题。

4. Webpack 配置：检查 Laravel Nova 工具中是否有任何可能与 Vue.js 构建设置冲突的自定义 Webpack 配置。确保它与项目的预期同步。

5. 清理并重新安装依赖项：在 Laravel Nova 工具和父项目中运行

   npm install

   或

   yarn install

   ，以确保所有依赖项均已正确安装并匹配版本。

6. 重新启动开发服务器：有时，停止并重新启动开发服务器可以解决与构建相关的特殊问题。

7. 检查 Laravel Mix 配置：确保 Laravel Nova 工具中的 Laravel Mix 配置 (

   webpack.mix.js

   ) 适用于 Vue.js。检查 Vue.js 组件是否得到正确处理。

8. 检查 Vue 组件：检查 Vue 组件本身（在您的情况下为

   Tool.vue

   ）的结构是否正确并且模板中没有错误。

9. 查看 Laravel Nova 文档：有关创建自定义工具的任何具体要求或建议，请参阅 Laravel Nova 的官方文档。

10. 小步调试：如果问题仍然存在，请尝试进一步简化 Vue 组件，并逐渐重新引入复杂性以确定根本原因。

11. 社区或支持论坛：如果问题仍然存在，请在 Laravel 或 Vue.js 社区论坛上寻求帮助。其他人可能也遇到过类似的问题并可以提供具体的见解。

通过仔细检查和调整 Laravel Nova、Laravel 项目和自定义工具之间的版本、配置和设置，您应该能够解决此错误。