Error compiling freshly created field in nova 4

[nouce]

• Laravel Version: 9.19.0
• Nova Version: 4.11.1
• PHP Version: 8.1
• Yarn Version: 1.22.17

Description:

When i create a new field with php artisan nova:field {vendor}/{name} (eg. fyr/test-field) the build immediately fails to compile. Without me changing anything.

I get the following error:

this is line 70 in the vue-loader/dist/index.js
const hasScoped = descriptor.styles.some((s) => s.scoped);

When i change the vue-loader to version 15.9.4 it compiles without any errors, but then is doesn't show on the resource where i add the field and get the following error in the console:

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

1. php artisan nova:field {vendor}/{package-name}
2. composer update in project root
3. cd into nova-component directory
4. yarn
5. yarn run nova:install
6. yarn run dev
7. The error as described above appears

I hope i described the error goed enough! Am I doing something wrong?

Thanks in advance.

[crynobone]

Which version of Node?

[nouce]

Node version: 16.13.0

[crynobone]

Just tested the reproducing steps and was unable to replicate it with npm and I'm not sure if there anything we can do here as this could be an integration issue between yarn and vue-loader.

[nouce]

Thanks for the reply! What NPM version are you running? Just tested with NPM and got the same error.

Thanks!

[crynobone]

Tested with the following:

➜ node -v
v14.19.2
➜ npm -v
6.14.17

and also

➜ node -v
v16.15.0
➜ npm -v
8.5.5

[baszach]

I had the same issue with Yarn. It was a pain and for me it was more convenient to shift back to NPM.

npm -v
8.11.0
node -v
v16.15.1

This works for me.

[nouce]

Hmmm....that's so strange, i run the exact same versions as you. But it keeps failing (also with NPM)

(Test is inside the custom fields directory)

[baszach]

Not sure if it interferes with something but have you deleted yarn.lock, node_modules and package-lock.json to start with a clean slate?

Also: What does your package.json in the custom component look like?

[nouce]

Thanks for the reaction! I just tested with a clean laravel & nova install, when i created a field it did compile without any errors. I think i'm reinstalling nova in my existing project, maybe that will solve it!

Will let you know if this is the case, thanks so far.

PS: i tried it with a newly generated field, kept getting the same error....

[nouce]

So i've re-installed nova and tried to make a field than compile it. At first i did get the same errors. I found out that if i remove the node_modules folder from the root project (so not the node_modelus from the nova field directory) the field compiles without any errors. As soon as I run npm install in my root directory (so regenerating the node_modules) the nova field gives the same errors when i compile it.

Any idea how that's possible?

[crynobone]

Any idea how that's possible?

Still not possible to replicate this

[nouce]

Hmmm that's so wierd....well, i will keep trying. I'll let it know when i fixed it!

[itrack]

I have the same problem

[itrack]

node -v
v16.14.0

npm -v
8.9.0

[nouce]

The way I fix/work around it now is to delete the node_modules from your root project (not from the nova field directory) and then try to run npm run dev in your field.

I know this is only a work around and not a solution, but it's the only way I can run my fields right now.

[metadeck]

I'm getting the same issue. Deleting the node modules folder in the project root fixed it.

I think this is due to my site using vue2 on the frontend as I thought Nova was a standalone build?? Am I wrong in this assumption?

[WillyReyno]

@crynobone I'm also getting the issue with a vue2 frontend, this might be the key element to reproduce the issue?

[itrack]

I think it's related to that: vuejs/vue-loader#1973

[metadeck]

Deleted node_modules from the root project allows fields to be compiled. I'm really struggling to understand why this is? Could it be that the nova fields vue-loader is somehow using node_modules rather than vendor/nova/node_modules.

Anyway rm -rf node_modules in the project root fixes this for now. But it's messy as hell.

[baszach]

Anyone else came across an issue where your Nova field just won't accept the changes in the browser (even though npm run watch is runnng)?

I removed a line from a Vue component (for a Nova field) and tried many things but in the browser it still displays the old version:

• removed node_modules + dist in field directory and reinstalled
• removed node_modules + vendor in project root and reinstalled
• restarted my docker container cleared all volumes and restarted it
• cleared browser cache

[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.

[RomainFon]

Yeah it's works fine for me !

[CodeWithDennis]

Had the same problem, also fixed it for me!

[msassa]

Thanks, man. I have been almost one day dealing with this !!!
This happened to me trying to update Laravel 8 to 9, and Nova 3 to 4.

[5aa5]

npm uninstall "@vue/compiler-sfc"
ERROR

[HeadStudios]

Yaaaay... I just found this... I just created the exact same issue lol.. #4813... so.. I guess that should be deleted right? I'm excited to read through and find the solution to my problem!

[HeadStudios]

IT WORKS!!! YAAAAAY!!! https://share.getcloudapp.com/YEuWyJQx - it's a Chrimstas miracle!

[janzankowski]

The accepted answer didn't work for me - not sure why. My setup is such that I have a Laravel project using Vue 2 and want to add a Nova 4 tool, which tries to use elements of Vue 3 (in vue-loader 16 and @vue/compiler-sfc 3).

What did work is the following ugly hack. In webpack.mix.js of the Nova tool, add the following at the beginning:

let fs = require('fs');
let data = fs.readFileSync('./node_modules/vue-loader/dist/compiler.js', 'utf-8');
let newValue = data.replace(
    /\/\/ Vue 3\.2\.13\+ ships the SFC compiler directly under the `vue` package/gim,
    'throw "Ugly hack to make a Vue 3 Nova tool compile with Vue 2 Laravel main project. '
    + 'See https://github.com/laravel/nova-issues/discussions/4549"; '
    + '// (Edited to prevent multiple "throw".) Vue 3.2.13+ ships the SFC compiler directly under the `vue` package');
fs.writeFileSync('./node_modules/vue-loader/dist/compiler.js', newValue, 'utf-8');

What this does is edit the file ./node_modules/vue-loader/dist/compiler.js, which before the edit looks like this:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.compiler = void 0;
try {
    // Vue 3.2.13+ ships the SFC compiler directly under the `vue` package
    // making it no longer necessary to have @vue/compiler-sfc separately installed.
    exports.compiler = require('vue/compiler-sfc');
}
catch (e) {
    try {
        exports.compiler = require('@vue/compiler-sfc');
    }
    catch (e) {
        throw new Error(`@vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc ` +
            `to be present in the dependency tree.`);
    }
}

It adds a throw statement in the first try { ... }, making it skip searching for vue/compiler-sfc (which I assume it gets from the main Laravel project using Vue 2) and therefore making it search for @vue/compiler-sfc (which I assume it gets from the Nova tool using code from Vue 3).

[phlisg]

Weird stuff happening on my side:
On my machine at home, where I initially created the custom field, I ran into the issue, applied the fix from the accepted answer and moved on with my life as usual.

Back to my work computer, I have a new, different error:

ERROR in ./resources/js/field.js + 37 modules
Assigning to rvalue (71:8)
|         _this3.allowLeavingForm();
|       }, function () {
|         Object(function webpackMissingModule() { var e = new Error("Cannot find module '@inertiajs/inertia'")
; e.code = 'MODULE_NOT_FOUND'; throw e; }()) = true;
|         event.preventDefault();
|         event.returnValue = '';

I have other errors :

ERROR in ../../vendor/laravel/nova/resources/js/mixins/PreventsModalAbandonment.js 7:0-48
Module not found: Error: Can't resolve 'vuex' in 'laravel/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json","
.vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

ERROR in ../../vendor/laravel/nova/resources/js/mixins/packages.js 17:0-49
Module not found: Error: Can't resolve 'form-backend-validation' in ''laravel/vendor/laravel/nova/resources/js/mixins/vendor/laravel/nova/resources/js/mixins'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json","
.vue"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".vue"]'?

I also tried @janzankowski 's answer but nothing works. Sigh.

Using node 16.15.1 and npm 8.11.0

[phlisg]

WTF!

I looked at the field's package.json and noticed the inconspicuous nova:install script.

Out of curiosity, I applied the accepted answer's fix again, then run npm run nova:install. So far so good.

I then run npm run prod (from the field's folder) and... voila! everything is now compiling happily.

[connormcmanustw]

In case anyone here is still having the same issues & no luck with any of the proposed solutions - I was FINALLY able to get everything running again only after cloning my repo fresh and going through a new install. I don't know if this was a matter of cached files or what, but I tried everything - including wiping the cache, reinstalling dependencies, deleting dist folder/node_modules/etc.

Hope this helps someone too!