'Alpine Expression Error: Cannot read properties of undefined (reading '$wire')

I'm trying to create a CKEditor alpine component to use in livewire but it keeps giving me this error:

Alpine Expression Error: Cannot read properties of undefined (reading '$wire')

My component

<div wire:ignore x-data="editor(@entangle($attributes->wire('model')))">
    <textarea x-ref="editor">

    </textarea>
</div>

@once
    <script src="{{ asset('CkEditor/build/ckeditor.js') }}"></script>
    <script>
        document.addEventListener('alpine:init', () => {
            let yourEditor;

            Alpine.data('editor', (model) => ({
                value: model,
                init() {
                    ClassicEditor
                        .create(this.$refs.editor)
                        .then(editor => {
                            yourEditor = this.editor
                            yourEditor.ui.focusTracker.on('change:isFocused', (evt, name,
                                isFocused) => {
                                if (!isFocused) {
                                    @this.set('content', yourEditor.getData());
                                }
                            });

                            this.$watch('content', function(newValue) {
                                yourEditor.setData(newValue);
                            }.bind(this));
                        });
                },
            }))
        })
    </script>
@endonce

The livewire component it's used on

<div>
    @section ('content')
        <div class="flex w-screen h-screen">
            <div class="m-auto">
                <x-inputs.ck-editor wire:model='content'/>
            </div>
        </div>
    @endsection
</div>

Update: When I remove the @entangle function it works but I can't seem to figure out why.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source