Undefined variable: _instance - summernote editor with laravel livewire

Question

I'm trying to use summernote editor with laravel livewire. I got below error

Trying to get property 'id' of non-object (View: /.../resources/views/layouts/app.blade.php)

window.livewire.find('<?php echo e($_instance->id);? >').set('description', contents);

layout

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">

    @livewireStyles

</head>
<body>
<div class="min-h-screen bg-gray-100">
    <main>
        {{ $slot }}
    </main>
</div>

@stack('modals')

@livewireScripts

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>

    <script type="text/javascript">
        $('.summernote').summernote({
            tabsize: 2,
            height: 200,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onChange: function(contents, $editable) {
                    @this.set('description', contents);
                }
            }
        });
    </script>
</body>
</html>

<div class="col-md-12">
    <div class="form-group" wire:ignore>
        <label for="description">Description</label>
        <textarea class="form-control summernote" wire:model="description">{{ $description }}</textarea>
    </div>
</div>

What I am doing wrong? I got this error on first render. If I remove onchange function, page is loading. but I could not save summernote editor value

UPDATE

<?php

namespace App\Http\Livewire\Posts;

use App\Models\Posts;
use App\Models\Categories;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;

class Create extends Component
{
    public $title, $description;

    public function render()
    {
        return view('livewire.posts.create');
    }

    protected $rules = [
        'title'   => 'required|max:200',
        'description'   => 'required',
    ];

    public function updated($title)
    {
        $this->validateOnly($title);
    }

    public function store()
    {
        $this->validate();

        Posts::create([
            'title' => $this->title,
            'detail' => $this->description,
        ]);

        redirect()->route('posts');
    }
}

view : livewire.posts.create

<div>
    <div class="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8">
        <div class="mt-10 sm:mt-0">
            <div class="md:grid md:grid-cols-3 md:gap-6">
                <div class="mt-5 md:mt-0 md:col-span-3">
                    <form wire:submit.prevent="store">
                        <div class="shadow overflow-hidden sm:rounded-md">
                            <div class="px-4 py-5 bg-white sm:p-6">
                                <div class="grid grid-cols-6 gap-6">
                                    <div class="col-span-12 sm:col-span-12 lg:col-span-6">
                                        <x-input.group label="Title" for="title" :error="$errors->first('title')">
                                            <x-input.text wire:model.defer="title" id="title" />
                                        </x-input.group>
                                    </div>

                                    <div class="col-span-12 sm:col-span-12 lg:col-span-6" wire:ignore>
                                            <textarea class="form-control summernote" wire:model="description">{{ $description }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
                                <button type="submit">
                                    Save
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

When exactly you get this error? Immediately on the first render? Or when you type into the summernote area.. or elsewhere? — František Heča
@František Heča I get error on first render. if I remove onchange function, it is working but I could not save editor value. — Shankar S Bavan
Please, show your php component also. And I would try to add unique wire:key on the div above the textarea (but this is probably not related with your error). — František Heča
@ShankarSBavan It seems to me like you try to run summernote before scripts are loaded. Any console errors? About summernote not declared? Have you tried to move summernote scripts to the head, as is described in the summernote manual? They also say, you can load them at the end of body, but they also wrap the code with $(document).ready - do you understand what I mean? — František Heča

Moses Ejim Moses Ejim · Accepted Answer · 2021-05-11T11:23:10

Make sure you call @this.set('description', contents); in a livewire component. using the @ symbol outside a livewire component will flag an error

Undefined variable: _instance - summernote editor with laravel livewire

1 Answers