Issue with rendering a component in Laravel Nova after updating dependencies

Question

Hello Stack Overflow community!

I'm facing an issue with rendering a component in Laravel Nova after updating dependencies in the project. When trying to open the component in Laravel Nova, I get an error "TypeError: Cannot read properties of undefined (reading '_c')". The problem occurred after updating dependencies and running the npm run dev command.

Here is some additional information and steps I've already taken:

Installed local versions of vue-loader and vue-template-compiler in the component directory. Checked the versions of dependencies in the component's package.json. Removed temporary files, rebuilt the component, and the project. Ensured that there are no other webpack configuration files in various parts of the project. The webpack.mix.js file in the component looks like this:

let mix = require('laravel-mix');

require('./nova.mix')

mix
  .setPublicPath('dist')
  .js('resources/js/tool.js', 'js')
  .vue()
  .css('resources/css/tool.css', 'css')
  .nova('{{ name }}')

If anyone has encountered a similar issue or can suggest additional diagnostic steps, I would appreciate the help!

Additional Information:

Laravel Nova: Version 4.x Vue.js: Version 2.7.15 Laravel Mix: Version 6.0.49

I've taken several steps to address the issue:

Checked and updated the versions of dependencies in the package.json file. Installed local versions of vue-loader and vue-template-compiler in the component directory. Removed the node_modules and dist directories, followed by running npm install and npm run dev to rebuild the project and the component. Verified that there are no conflicting webpack configurations or conflicting dependencies in different parts of the project. Despite these efforts, the issue persists. I expected the component to render without errors after the dependency update.

If anyone has encountered a similar problem or can provide further guidance on resolving the "TypeError: Cannot read properties of undefined (reading '_c')" issue in Laravel Nova, I would greatly appreciate the assistance.

Despite these efforts, the issue persists. I've noticed that the problem emerged after updating Vue.js from version 2.6.12 to 2.7.15.

Answer 1

Here's how I resolved it:

Root package.json: Ensure that the version of Vue.js in your root package.json is set to 2.6.12, ensuring compatibility with existing dependencies.

Component package.json: In your Nova component's package.json, you've set "vue-loader": "^16.8.3" and "@vue/compiler-sfc": "^3.3.9". This configuration is compatible with Vue.js 2.6.12.

Install Dependencies: Run npm install in your Nova component directory to ensure that the dependencies are installed.

Rebuild: Run npm run dev again to rebuild the project.

This configuration allows me to use Vue.js 2.6.12 with vue-loader 16.x and @vue/compiler-sfc 3.x in my Laravel Nova component without encountering the mentioned error.

If anyone in the community has encountered a similar issue or has alternative solutions that might offer better compatibility with Vue.js 2.7.15 and the specified versions of vue-loader and @vue/compiler-sfc, I would appreciate hearing about them. Are there any suggestions for improvements or different configurations that might address this problem more effectively?