search

whitecube / nova-flexible-content

Flexible Content & Repeater Fields for Laravel Nova
MIT License
787 stars 234 forks source link

TypeError: can't access property "_c", t._self is undefined #352

Closed alekmlynek closed 2 years ago

alekmlynek commented 2 years ago

Nova 4 (Laravel 9) is throwing this error: TypeError: can't access property "_c", t._self is undefined

I've removed all other fields, and all layouts, to try and get this to work. This error is in all results.

I've not tested a fresh install, but my versions are: flexfield 1.0 laravel 9.12.1 nova 4.5.1

Screen Shot 2022-05-10 at 6 55 49 PM

[NOVA] Initiating Nova countdown... app.js:401:19
[NOVA] We have lift off! app.js:401:19
[NOVA] All systems go... app.js:401:19
[NOVA] Syncing Inertia props to the store... app.js:401:19
XHRGEThttp://web.test/nova-api/nova-notifications
[HTTP/1.1 200 OK 672ms]

XHRGEThttp://web.test/nova-api/options/creation-fields?editing=true&editMode=create&viaResource=&viaResourceId=&viaRelationship=
[HTTP/1.1 200 OK 689ms]

TypeError: can't access property "_c", t._self is undefined
    render nova-flexible-content:1
    zn runtime-core.esm-bundler.js:893
    effect runtime-core.esm-bundler.js:5030
    run reactivity.esm-bundler.js:167
    R runtime-core.esm-bundler.js:5145
    j runtime-core.esm-bundler.js:4939
    N runtime-core.esm-bundler.js:4894
    g runtime-core.esm-bundler.js:4488
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    effect runtime-core.esm-bundler.js:5031
    run reactivity.esm-bundler.js:167
    R runtime-core.esm-bundler.js:5145
    j runtime-core.esm-bundler.js:4939
    N runtime-core.esm-bundler.js:4894
    g runtime-core.esm-bundler.js:4488
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    effect runtime-core.esm-bundler.js:5031
    run reactivity.esm-bundler.js:167
    R runtime-core.esm-bundler.js:5145
    j runtime-core.esm-bundler.js:4939
    N runtime-core.esm-bundler.js:4894
    g runtime-core.esm-bundler.js:4488
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    L runtime-core.esm-bundler.js:4806
    T runtime-core.esm-bundler.js:4713
    w runtime-core.esm-bundler.js:4566
    g runtime-core.esm-bundler.js:4485
    effect runtime-core.esm-bundler.js:5103
    run reactivity.esm-bundler.js:167
    P runtime-core.esm-bundler.js:4968
    N runtime-core.esm-bundler.js:4897
    g runtime-core.esm-bundler.js:4488
    effect runtime-core.esm-bundler.js:5103
    run reactivity.esm-bundler.js:167
    en runtime-core.esm-bundler.js:155
    Cn runtime-core.esm-bundler.js:389
runtime-core.esm-bundler.js:226:8
    nn runtime-core.esm-bundler.js:226
    nn runtime-core.esm-bundler.js:226
    zn runtime-core.esm-bundler.js:921
    effect runtime-core.esm-bundler.js:5030
    run reactivity.esm-bundler.js:167
    R runtime-core.esm-bundler.js:5145
    j runtime-core.esm-bundler.js:4939
    N runtime-core.esm-bundler.js:4894
    g runtime-core.esm-bundler.js:4488
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    effect runtime-core.esm-bundler.js:5031
    run reactivity.esm-bundler.js:167
    R runtime-core.esm-bundler.js:5145
    j runtime-core.esm-bundler.js:4939
    N runtime-core.esm-bundler.js:4894
    g runtime-core.esm-bundler.js:4488
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    effect runtime-core.esm-bundler.js:5031
    run reactivity.esm-bundler.js:167
    R runtime-core.esm-bundler.js:5145
    j runtime-core.esm-bundler.js:4939
    N runtime-core.esm-bundler.js:4894
    g runtime-core.esm-bundler.js:4488
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    E runtime-core.esm-bundler.js:4685
    C runtime-core.esm-bundler.js:4593
    w runtime-core.esm-bundler.js:4565
    g runtime-core.esm-bundler.js:4485
    E runtime-core.esm-bundler.js:4685
    B runtime-core.esm-bundler.js:4852
    g runtime-core.esm-bundler.js:4482
    L runtime-core.esm-bundler.js:4806
    T runtime-core.esm-bundler.js:4713
    w runtime-core.esm-bundler.js:4566
    g runtime-core.esm-bundler.js:4485
    effect runtime-core.esm-bundler.js:5103
    run reactivity.esm-bundler.js:167
    P runtime-core.esm-bundler.js:4968
    N runtime-core.esm-bundler.js:4897
    g runtime-core.esm-bundler.js:4488
    effect runtime-core.esm-bundler.js:5103
    run reactivity.esm-bundler.js:167
    en runtime-core.esm-bundler.js:155
    Cn runtime-core.esm-bundler.js:389
GEThttp://web.test/favicon.ico
[HTTP/1.1 200 OK 0ms]
ianrobertsFF commented 2 years ago

Probably get more useful info out of it if you remix nova-flexible-content for dev: 

cd vendor/whitecube/nova-flexible-content
npm i
composer update
npm --prefix='vendor/laravel/nova' ci
npm run dev
alekmlynek commented 2 years ago

You're right, thanks. I got a log entry and am working on this to see if I've done something that is likely the case. It appears it's getting stuck on a null value somewhere.

`[2022-05-11 19:04:04] local.ERROR: Call to a member function find() on null {"userId":2,"exception":"[object] (Error(code: 0): Call to a member function find() on null at /var/www/vendor/whitecube/nova-flexib le-content/src/Value/Resolver.php:42)

[stacktrace]

0 [internal function]: Whitecube\NovaFlexibleContent\Value\Resolver->Whitecube\NovaFlexibleContent\Value\{closure}(Object(stdClass), 0)

1 /var/www/vendor/laravel/framework/src/Illuminate/Collections/Collection.php(725): array_map(Object(Closure), Array, Array)

2 /var/www/vendor/whitecube/nova-flexible-content/src/Value/Resolver.php(47): Illuminate\Support\Collection->map(Object(Closure))

3 /var/www/vendor/whitecube/nova-flexible-content/src/Flexible.php(441): Whitecube\NovaFlexibleContent\Value\Resolver->get(Object(App\Models\Commerce\Option), 'option_flex', NULL)

4 /var/www/vendor/whitecube/nova-flexible-content/src/Flexible.php(252): Whitecube\NovaFlexibleContent\Flexible->buildGroups(Object(App\Models\Commerce\Option), 'option_flex')

5 /var/www/vendor/laravel/nova/src/Fields/FieldCollection.php(77): Whitecube\NovaFlexibleContent\Flexible->resolve(Object(App\Models\Commerce\Option))

6 /var/www/vendor/laravel/framework/src/Illuminate/Collections/Traits/EnumeratesValues.php(263): Laravel\Nova\Fields\FieldCollection->Laravel\Nova\Fields\{closure}(Object(Whitecube\NovaFlexibleContent

\Flexible), 0)`

alekmlynek commented 2 years ago

I've been able to get Flexfield working on a new installation of a recent installation of Nova 4. The project I'm working on was an upgrade from 3 -> 4, and perhaps this is the cause. Regardless, I've followed all the instructions. The weird part is, my "fields" function for this project uses NovaRequest while the other project that works, is using Illuminate Request even though the Nova docs say to use NovaRequest.

Super confused, unsure if it is related but will keep looking.

ianrobertsFF commented 2 years ago

Yeah, in Nova 3 it required the request to be Illuminate\Http\Request and therefore Laravel\Nova\Http\Requests\NovaRequest would work, as it extends Illuminate request.

Nova 4 requires NovaRequest and as such Request wont work.

https://nova.laravel.com/docs/4.0/upgrade.html#nova-request

alekmlynek commented 2 years ago

Thanks Ian. I think this is a red herring. For some reason Request DOES work on my other Nova 4 project, I think we moved the Nova views from another project, and maybe forgot to change these. Flex works on that one.

On THIS project, I'm using NovaRequest and Flex does not work. So I'm just all out confused.

I'll keep poking at this. I think I'm getting closer. The error message has changed to:

TypeError: can't access property "_c", t._self is undefined render nova-grid-system:1 zn runtime-core.esm-bundler.js:893`

So Flex no longer complains but the grid system is, even though I've tried turning it off. No Laravel log messages this time and flex doesn't show up.

alekmlynek commented 2 years ago

Ok, that was it. codenco-dev/nova-grid-system is not compatible with FlexField. Thankfully, I was simply experimenting with it and forgot I had it installed. For some reason, I thought it was part of Nova, but removing it from Composer solved the issue.

Leaving full description incase anyone else runs into this:

  1. I'm manually casting my Flex fields instead of enabling auto-cast (for reasons). I had enabled auto-cast as a way to try and fix this, and forgot about it. Once I removed this, flex started working but not showing.
  2. The Nova Grid system was causing an issue for Flex. I no longer had the error above, but an error about Nova Grid. By removing the Nova Grid composer package, everything seems to be working fine.