I made a component for file upload in Livewire and AlpineJs, but I got an error in the console log.

The reference for creating the code is: https://ewilan-riviere.com/articles/laravel-filepond-livewire#lets-start

First problem, I got a warning like this

livewire.js?id=87e1046f:1125 Alpine Expression Error: Unexpected token ‘const’ Expression: “// Get a reference to the file input element const inputElement = document.querySelector(‘input[type=”file”]’); // Create a FilePond instance const pond = FilePond.create(inputElement);”

and I get an error like this

Uncaught SyntaxError: Unexpected token ‘const’ at new AsyncFunction (<anonymous>) …

here is the code I used to create components from livewire and alpinejs

@pushOnce('head')
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet" />
@endPushOnce
<div>
    <div class="relative" wire:ignore x-cloak x-data="{
        model: @entangle($attributes->whereStartsWith('wire:model')->first()),
        isMultiple: {{ $multiple ? 'true' : 'false' }},
        current: undefined,
        currentList: [],
        async URLtoFile(path) {
            let url = `${window.appUrlStorage}/${path}`;
            let name = url.split('/').pop();
            const response = await fetch(url);
            const data = await response.blob();
            const metadata = {
                name: name,
                size: data.size,
                type: data.type
            };
            let file = new File([data], name, metadata);
            return {
                source: file,
                options: {
                    type: 'local',
                    metadata: {
                        name: name,
                        size: file.size,
                        type: file.type
                    }
                }
            }
        }
    }" x-init="async () => {
        let picture = model
        let files = []
        let exists = []
        if (model) {
            if (isMultiple) {
                currentList = model.map((picture) => `${window.appUrlStorage}/${picture}`);
                await Promise.all(model.map(async (picture) => exists.push(await URLtoFile(picture))))
            } else {
                if (picture) {
                    exists.push(await URLtoFile(picture))
                }
            }
        }
        files = exists;
        let modelName = '{{ $attributes->whereStartsWith('wire:model')->first() }}';
    
        if (Notification.permission !== 'granted') {
            Notification.requestPermission();
        }
    
        const notify = () => {
            if (Notification.permission === 'granted') {
                new Notification('File uploaded', {
                    body: 'You can save changes!',
                });
            }
        };
        const inputElement = $refs['{{ $attributes->get('ref') ?? 'input' }}'];
        const pond = FilePond.create(inputElement);
        pond.setOptions({
            allowMultiple: {{ $multiple ? 'true' : 'false' }},
            server: {
                process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    @this.upload(modelName, file, load, error, progress)
                },
                revert: (filename, load) => {
                    @this.removeUpload(modelName, filename, load)
                },
                remove: (filename, load) => {
                    @this.removeFile(modelName, filename.name)
                    load();
                },
            },
            allowImagePreview: {{ $preview ? 'true' : 'false' }},
            imagePreviewMaxHeight: {{ $previewMax ? $previewMax : '256' }},
            allowFileTypeValidation: {{ $validate ? 'true' : 'false' }},
            acceptedFileTypes: {{ $accept ? $accept : 'null' }},
            allowFileSizeValidation: {{ $validate ? 'true' : 'false' }},
            maxFileSize: {!! $size ? "'" . $size . "'" : 'null' !!},
            maxFiles: {{ $number ? $number : 'null' }},
            required: {{ $required ? 'true' : 'false' }},
            disabled: {{ $disabled ? 'true' : 'false' }},
            onprocessfile: () => notify()
        });
        pond.addFiles(files)
        pond.on('addfile', (error, file) => {
            if (error) {
                console.log('Oh no');
                return;
            }
        });
    }">...
    </div>
</div>
@pushOnce('scripts')
...
    <script>
        FilePond.registerPlugin(FilePondPluginFileValidateType);
        FilePond.registerPlugin(FilePondPluginFileValidateSize);
        FilePond.registerPlugin(FilePondPluginImagePreview);
    </script>
    <script>
        window.appUrlStorage = "{{ config('app.url') . '/storage' }}";
    </script>
@endPushOnce