Error compiling components when Vue 2 is installed in main package.json

[WillyReyno]

• Laravel Version: 9.24.0
• Nova Version: 4.12.14
• PHP Version: 8.0.9
• Operating System and Version: MacOS 12.5
• Reproduction Repository: https://github.com/WillyReyno/nova-component-vue

Description:

This is issue is related to discussion #4549, but I'm creating an issue as I was able to make a reproduction repo.

When Vue 2 is installed in the main package.json of the laravel app, nova components compilation fails with the following error:

Detailed steps to reproduce the issue on a fresh Nova installation:

• Create custom tool php artisan nova:tool acme/price-tracker
• Install Vue 2 in project's root : npm install vue@^2.7.8
• Move into custom tool directory cd nova-components/PriceTracker
• Run npm run dev / npm run prod

[crynobone]

After some additional research, this is due to vue-loader trying to use require('vue/compiler-sfc') insteads of require('@vue/compiler-sfc') which is required directly in the template. https://github.com/vuejs/vue-loader/blob/6a293dff5f2ed3167eb3b448f1d714091185a44e/src/compiler.ts#L12-L25

This can be solved by adding the following:

npm uninstall "@vue/compiler-sfc"
npm install -D "vue"

Example: nova-issues/issue-4595@e56d8af

There could be side-effect on requiring vue directly (the generated dist are slightly larger with more code) but I can't find any error at the moment. Best to first try with npm run dev and tests it out before using npm run prod.