Skip to content

[Bug]: TypeError: Cannot read properties of null (reading '_x_dataStack') #21

@sebestenyb

Description

@sebestenyb

WireFlow version

^0.1.2@alpha

Laravel version

13.11.2

Livewire version

v4.3.0

PHP version

8.4.21

Description

I am trying to integrate WireFlow to a simple Filament page.

Steps to reproduce

  1. Create a Filament page (which extends Livewire's component)
  2. Create a simple blade file with a custom server action
  3. Hit the action, see the error (after the action executed successfully)
  4. If the action is marked as #[Renderless], no error

Blade template

<x-filament-panels::page>
    <div class="h-screen">
        <x-flow :nodes="$nodes" :edges="$edges" class="h-screen" :controls="true" :sync="true" :config="['panOnScroll' => true]">
            <x-slot:node>
                <x-flow-handle type="target" position="top"/>
                <span x-text="node.data.label"></span>
                <x-flow-handle type="source" position="bottom"/>
                <x-flow-toolbar position="top">
                    <button @click="removeNodes([node.id])">Delete</button>
                    <button @click="$wire.duplicate(node.id)">Duplicate</button>
                    <button @click="$wire.save">Save</button>
                </x-flow-toolbar>
            </x-slot:node>
        </x-flow>
    </div>
</x-filament-panels::page>

Livewire component

<?php

namespace App\Filament\App\Pages;

use App\Models\Organisation;
use Filament\Facades\Filament;
use Filament\Pages\Page;
use Illuminate\Support\Facades\Log;
use Livewire\Attributes\Renderless;

class OrganisationDashboard extends Page
{
    protected string $view = 'filament.app.pages.organisation-dashboard';

    public array $nodes;
    public array $edges;

    public function mount(): void
    {
        /** @var Organisation $organisation */
        $organisation = Filament::getTenant();
        $process = $organisation->processes()->first();
        $this->nodes = $process->nodes;
        $this->edges = $process->edges;
    }

//    #[Renderless]
    public function save(): void
    {
        Log::debug("[OrganisationDashboard] - save() :: ", $this->nodes);
        $organisation = Filament::getTenant();
        $process = $organisation->processes()->first();
        $process->update([
            'nodes' => $this->nodes,
            'edges' => $this->edges,
        ]);
    }

}

Errors

livewire.js?id=ab6b028c:1223 Uncaught (in promise) TypeError: Cannot read properties of null (reading '_x_dataStack')
    at closestDataStack (livewire.js?id=ab6b028c:1223:14)
    at Object.scope [as $data] (livewire.js?id=ab6b028c:1214:25)
    at flow-node.ts:291:35
    at reactiveEffect (livewire.js?id=ab6b028c:2756:18)
    at Object.effect2 [as effect] (livewire.js?id=ab6b028c:2731:7)
    at effect (livewire.js?id=ab6b028c:988:35)
    at livewire.js?id=ab6b028c:2279:26
    at wrappedEffect (livewire.js?id=ab6b028c:1004:29)
    at Function.<anonymous> (flow-node.ts:150:7)
    at flushHandlers (livewire.js?id=ab6b028c:1595:48)

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions