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.
vendor/laravel/nova/package.json. If it's the issue, you will have to upgrade to vue3, or downgrade nova to version 3, which supports vue 2