Uncaught ReferenceError: can't access lexical declaration 'html' before initialization

Question

Can someone explain to me the weird error messages that occur both in chrome and firefox when trying to access a variable before the let declaration: "let X".

<script>
    $(document).ready(function (e) {
        showJobs();
        function showJobs() {
            let html = '' +
                '@foreach(auth()->user()->jobs as $job)'+
                '<tr>'+
                '<td class="fw-normal">{{ $job->id }}</td>'+
                '<td class="fw-normal">{{ $job->employment_type }}</td>'+
                '<td class="fw-normal">{{ $job->start_date }}</td>'+
                '<td class="fw-normal">{{ $job->end_date }}</td>'+
                '<td class="fw-normal">{{ $job->state }}</td>'+
                '<td class="fw-normal">{{ $job->city }}</td>'+
                '<td>'+
                '<form action="{{ route('job.destroy', $job->id) }}" method="post">'+
                '@csrf'+
                "@method('DELETE')"+
                '<div class="btn-group">'+
                "<a href="+{{ route('job.edit', $job->id) }}+" class='btn btn-info btn-sm'>Delete</a>"+
                '<button type="submit" class="btn btn-danger btn-sm">Edit</button>'+
                '</div>'+
                '</form>'+
                '</td>'+
                '</tr>'+
                '@endforeach'+
                $('#showJobs').append(html);
        }
    });
</script>

I get this error.

I put already these codes

<meta name="csrf-token" content="{{ csrf_token() }}">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Answer 1

can't access lexical declaration before initialization

A lexical variable was accessed before it was initialized. This happens within any block statement when let or const declarations are accessed before they are defined.

In your code, html variable was accessed before it was declared $('#showJobs').append(html);

unexpected token: identifier

This is the syntax error.

In your code, you should write this in single quote instead of double quote "@method('DELETE')"

Because double quote already in use while converting

<input type="hidden" name="_method" value="DELETE">

Here is correct code:

<script>
$(document).ready(function (e) {
    showJobs();
    function showJobs() {
        let html = '' +
            '@foreach(auth()->user()->jobs as $job)'+
            '<tr>'+
            '<td class="fw-normal">{{ $job->id }}</td>'+
            '<td class="fw-normal">{{ $job->employment_type }}</td>'+
            '<td class="fw-normal">{{ $job->start_date }}</td>'+
            '<td class="fw-normal">{{ $job->end_date }}</td>'+
            '<td class="fw-normal">{{ $job->state }}</td>'+
            '<td class="fw-normal">{{ $job->city }}</td>'+
            '<td>'+
            '<form action="{{ route('job.destroy', $job->id) }}" method="post">'+
            '@csrf'+
            '@method('DELETE')'+
            '<div class="btn-group">'+
            "<a href="+{{ route('job.edit', $job->id) }}+" class='btn btn-info btn-sm'>Delete</a>"+
            '<button type="submit" class="btn btn-danger btn-sm">Edit</button>'+
            '</div>'+
            '</form>'+
            '</td>'+
            '</tr>'+
            '@endforeach';
            $('#showJobs').append(html);
    }
});