Undefined variable: _instance

I’m trying to create a FilePond component. I’ve got as far as the code below.

<div
    x-data
    x-init="
    FilePond.setOptions({
        server: {
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                @this.upload('attachment', file, load, error, progress)
            },
        },
    });

    FilePond.create( $refs.input )
    "

    wire:ignore
>
    <input type="file" x-ref="input">
</div>


@push('styles')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
@endpush

@push('scripts')
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
@endpush

When displaying the view, the following error is generated:

ErrorException

Undefined variable: _instance (View: /Users/simon/Act/mts-nova/resources/views/components/input/filepond.blade.php) (View: /Users/simon/Act/mts-nova/resources/views/components/input/filepond.blade.php)

Are you using the latest version of Livewire: Yes

Any help or suggestions would be much appreciated.

Did you ever figure this issue out? I’m experiencing the same issue.

Unfortunately, I have still not been able to resolve this.

Simon