[SOLVED] Vue template compile error, "Cannot read properties of undefined (reading '

Vue template compile error, "Cannot read properties of undefined (reading '_c')"

I'm working on adding a custom tool to an existing Laravel application using Laravel Nova for the admin panel. The auto generated tool that is created with "php artisan nova:tool vendor/name" doesn't seem to work out of the box. It shows in the Nova menu (added it to the NovaServiceProvider.php) but when I open it nothing renders and the browser console returns this error.

The exact stack trace and error I get is:

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)

This seems to a very generic error usually related to vue, vue-loader and vue-template-compiler version mismatches. I've minimalized the Tool.vue componenent to the bare minimum for testing purposes.

Current Tool.vue:

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

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

And this is the package.json from the Tool:

  "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 the package.json from the parent project:

    "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"
    }

Things I've tried

update everything to the latest version, broke the project for the most part and seems like more work than working out this error.
put every matching dependancy at the same version, doesn't seem to change much.
delete node_modules and npm install anew
delete vendor and composer install anew
added VueLoaderPlugin to webpack.mix.js

I've tried more things but these were the most obvious things IMO.

Thanks in advance!

Solution

Per suggestion from @Lk77 I upgraded to vue 3 because the project used Nova 4, this resolved the current error!