SyntaxError: Handlebars partials are not supported

[itssabhishek]

Prettier 2.4.1

Handlebars files are not getting formatted when included partials. I searched it on google but no proper solution was found. Please fix this.

Edited by maintainer:

Prettier 3.0.3
Playground link

--parser glimmer
--trailing-comma es5

Input:

{{> header}}

Output:

SyntaxError: Handlebars partials are not supported (1:0)
> 1 | {{> header}}
    | ^^^^^^^^^^^^

[sosukesuzuki]

Can you use issue template?

[itssabhishek]

Yes I can use template. It is parsing with no problem.

[sosukesuzuki]

Can you reproduce the bug at https://prettier.io/playground/ ?

[itssabhishek]

Definitely but I am in India and its kind of late night here. Will it be okay if I perform this tomorrow morning and then inform you?

[itssabhishek]

By the way you can also try this by taking any handlebar partial in your file

[sosukesuzuki]

To be honest, I know very little about Handlebars. So it's costly to try it in my own environment. It would be helpful if you could share the results on Playground.

[itssabhishek]

SyntaxError: Unexpected token (1:3)

1 | {{> header}}
| ^
2 |
3 |
4 |

This is what i am getting in playground

[itssabhishek]

SyntaxError: Unexpected token (1:3)

1 | {{> header}}
| ^
2 |
3 |
4 |

[sosukesuzuki]

Thank you. Prettier doesn't support Handlebars partials

Prettier 2.4.1
Playground link

--parser glimmer

Input:

{{> header}}

Output:

SyntaxError: Handlebars partials are not supported: 

|
|  {{> header}}
|

(error occurred in 'an unknown module' @ line 1 : column 0) (1:0)
> 1 | {{> header}}
    | ^^^^^^^^^^^^

[itssabhishek]

Then how we can solve this issue?

[sosukesuzuki]

Sorry, I don't know. I'll investigate.

[itssabhishek]

I think we have to add this feature.

[eimantaaas]

Any news to this?

[itssabhishek]

No

[duailibe]

FYI we use the Glimmer parser that does the parsing of code that combines Handlebars + HTML (the Handlebars parser doesn't support HTML), but that parser does not support all Handlebars features (e.g. partials)

That means we're blocked until the Glimmer parser support those features or somebody comes up with another solution.

[Th3S4mur41]

@duailibe is there an issue to have support for this be added to Glimmer?
I couldn't find one.

[devbytyler]

Any progress on this?

[ahilke]

@duailibe is there an issue to have support for this be added to Glimmer?
I couldn't find one.

@Th3S4mur41 I don't think there are any concrete plans, since Glimmer is supporting Ember's style of Handlebars and not Handlebars generally. I see an attempt was made here though: glimmerjs/glimmer-vm#1367

[lenovouser]

I would also really like to see this being fixed 👍🏻 Is there any way one can help?

[deurk]

Seem unlikely at this point. Would there be any way to just avoid triggering an error and being able to just ignore those lines??

[rserbitar]

bummer

[baileymatthewr]

@sosukesuzuki && @itssabhishek : It seems like a meet-you-halfway-solution would be to allow comments that prevent the parser from touching that bit of code. However, it still tries to "validate" and gives that error.

Example:

{{#if edit}}
  <form id='item-form-0' class='needs-validation edit-item' novalidate>
    {{!-- prettier-ignore-start --}}
      {{> p_shop_ticket_product_info }}
    {{!-- prettier-ignore-end --}}
  </form>
{{else}}

However, not even that works. it still produces that error...

[SitaGomes]

There is a prettierrc configuration that formats the partials the right way

For more details see shpp/programming.org.ua#25

filename: .prettierrc.json

content:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "printWidth": 100,
  "useTabs": false,
  "bracketSpacing": true,
  "endOfLine": "lf",
  "arrowParens": "always",
// IMPORTANT PART BELLOW
  "overrides": [   
    {
      "files": "**/*.hbs",
      "options": {
        "parser": "angular"   
      }
    }
  ]
}

[bshifrin]

@SitaGomes it works for partials, but doesn't work with conditions for attributes:

components/video-playlist/template.hbs
[error] components/video-playlist/template.hbs: SyntaxError: Unexpected closing tag "div". 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 (2:1)
[error]   1 | <div {{#if gridEnabled}}data-items-layout="list"{{/if}}>
[error] > 2 | </div>
[error]     | ^^^^^^
[error]   3 |

Any ideas how to parse and format them correctly?

[emilienbidet]

Any news or workaround about using Prettier with Handlebars partials?

[xianping-yan]

??? resolved this issue?

[p4535992]

@SitaGomes it works for partials, but doesn't work with conditions for attributes:

components/video-playlist/template.hbs
[error] components/video-playlist/template.hbs: SyntaxError: Unexpected closing tag "div". 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 (2:1)
[error]   1 | <div {{#if gridEnabled}}data-items-layout="list"{{/if}}>
[error] > 2 | </div>
[error]     | ^^^^^^
[error]   3 |

Any ideas how to parse and format them correctly?

did you find a workaround ?

[bshifrin]

did you find a workaround ?

@SitaGomes nope

[Lino99-FE]

#11834 (comment)
I think his solution is very good. As long as it can effectively ignore part of the code, it can avoid many problems caused by syntax incompatibility.
But when can we support partial ignoring?

[trylovetom]

Any update? I can't ignore code either.