Can't use Vue Dev Tools with Nova and newer version of Node

[amirshawn]

• Laravel Version: 10.19
• Nova Version: 4.27.12
• PHP Version: 8.1.18
• Database Driver & Version:
• Operating System and Version: Mac OS
• Browser type and version: #.#
• Reproduction Repository: https://github.com/###/###

I am trying out Nova for the first time. It looks like by default you can't use vue dev tools with Nova. I keep seeing that I should compile the nova assets like so:
cd ./vendor/laravel/nova
mv webpack.mix.js.dist webpack.mix.js
npm i
npm run dev
rm -rf node_modules
cd -
php artisan nova:publish

When I do this I get a bunch of errors during the compile process and then when I go to the browser I have this error:
Unable to locate Mix file: /app.css. (View: ***/vendor/laravel/nova/resources/views/layout.blade.php)

I think this may be because I am using a new version of Node

By putting a postcss.config.js in the nova folder I was able to compile without errors.

module.exports = {
plugins: [
require('autoprefixer'),
],
};

Then running
rm -rf node_modules
cd -
php artisan nova:publish
I am able to use vue dev tools.

I don't have a ton of experience so I was hoping someone could take a look and put a fix in future versions so when I update next time it will work correctly.

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

Try compiling Nova assets using a new version of Node

[crynobone]

Please refer to our documentation: https://nova.laravel.com/docs/customization/frontend.html#vue-devtools

We don't recommend using npm install as it would generate different/unconfirmed dependencies instead of using package-lock.json as exactly as being used to compile for production.