[Prettier plugin] Error on a non existing closing tag

[kjvdven]

I get a prettier error saying unexpected closing tag, but when I check my code all seems correct.

The error:

SyntaxError: Unexpected closing tag "article". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (72:3)
  70 |       </div>
  71 |     </section>
> 72 |   </article>
     |   ^^^^^^^^^^
  73 |   </BM92cTjcEpS5xPCsyQdJB>
  74 |
  75 | </main>

The code:

@extends('layouts.app')
@section('content')

<main id="main-content" class="site-main ">
  <article class="article" id="article">
    @while(have_posts()) @php the_post() @endphp

    // Other code

  </article>
  @endwhile
</main>

@endsection

1. I tried removing the article tag, the error moves to the main tag.
2. I also removed the main tag, the error moves to the </BM92cTjcEpS5xPCsyQdJB> tag

I put my code in an online blade formatter and didn't receive errors.

I use the following versions:

"prettier": "^2.8.8",
"prettier-plugin-blade": "^1.6.14",

[JohnathonKoster]

Would you be able to share more of the template triggering the error? There are a few things that might cause this with the formatter, but would need to see more context.

Thanks!

[kjvdven]

Will look at on Monday, my weekend started today.

Have a nice weekend.

[JohnathonKoster]

No rush and thanks, you too! 🙂

[kjvdven]

I forgot which project I had the first error, but today I ran into a similar error.

Today I was working in an old project and I setup linting and prettier. When I ran the prettier CLI on all the files and a couple of the files returned an error, this is one of those files.

I think the error is triggered because of the @if construction:

@if(is_category())
  <li class="cat-item">
@else
  <li class="cat-item current-cat">
@endif

Full code of the file:

@extends('layouts.app')

@section('content')
<div class="container">
  @include('partials.page-header')

  <a href="#filter" class="btn btn-outline-dark btn-sm btn-submenu">&darr; Spring naar filters</a>

  <div class="row">

    <div class="col-lg-8 order-lg-2">

      @if (!have_posts())
        <div class="alert alert-warning">
          {{ __('Sorry, no results were found.', 'sage') }}
        </div>
        {!! get_search_form(false) !!}
      @endif

      @while (have_posts()) @php the_post() @endphp
        @include('partials.content-'.get_post_type())
      @endwhile

      {!! get_the_posts_navigation(array(
        'next_text' => 'Vorige pagina',
        'prev_text' => 'Volgende pagina',
      )) !!}
    </div>

    <div class="col-lg-4 order-lg-1">
      <nav  id="filter" class="sidebar-nav">
        <h3 class="sidebar-nav__mobile-title">Filters</h3>
        <ul>
          @if(is_category())
          <li class="cat-item">
          @else
          <li class="cat-item current-cat">
          @endif
            <a href="{{ get_post_type_archive_link('post') }}">Toon alles</a>
          </li>
          @php wp_list_categories(array( 'title_li' => "" )); @endphp
        </ul>
      </nav>
    </div>

  </div>

</div>
@endsection

Error:

resources/views/index.blade.php[error] resources/views/index.blade.php: SyntaxError: Unexpected closing tag "li". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (49:11)
[error]   47 | </BDhVvB>
[error]   48 |             <a href="BqRhaz3j0fa4HFWT0fMmZHlsSaPHk81IOi5sdzSYB">Toon alles</a>
[error] > 49 |           </li>
[error]      |           ^^^^^
[error]   50 |           <BJhBB>
[error]   51 | <B3yCKkzp8a1Jj4OB></B3yCKkzp8a1Jj4OB></BJhBB>
[error]   52 |

[kjvdven]

No rush and thanks, you too! 🙂

I updated the code in the original post a little, and I found the error in the code. The @endwhile should be before the </article> closing tag and then it works like a charm.

@extends('layouts.app')
@section('content')

<main id="main-content" class="site-main ">
  <article class="article" id="article">
    @while(have_posts()) @php the_post() @endphp

    // Other code

  </article>
  @endwhile
</main>

@endsection

That is what I get for setting up formatters and linters in old projects I get assigned 😅.

[JohnathonKoster]

Ah, in either case those types of syntaxes is not something I can (reasonably) support. You can trigger this in prettier itself by attempting to format something like this:

<div>
<article></div></article>

in your second example it is indeed the if construction here:

@if(is_category())
<li class="cat-item">
@else
<li class="cat-item current-cat">
@endif
<a href="{{ get_post_type_archive_link('post') }}">Toon alles</a>
</li>

To get around this, we would have to wrap that section of the template in special comments to have it removed before formatting:

{{-- format-ignore-start --}}
@if(is_category())
<li class="cat-item">
@else
<li class="cat-item current-cat">
@endif
<a href="{{ get_post_type_archive_link('post') }}">Toon alles</a>
</li>
{{-- format-ignore-end --}}

This will cause no formatting to take place in that section of the document, but will stop errors from preventing formatting of everything else.

Generally better to attempt to refactor those dynamic HTML fragments. In your case, something like this will do it:

<li class="cat-item {{ is_category() ? 'current-cat' : '' }}">
    <a href="{{ get_post_type_archive_link('post') }}">Toon alles</a>
</li>

Hopefully this helps!