prettier: SyntaxError: Handlebars partials are not supported

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}}
    | ^^^^^^^^^^^^

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 34
Comments: 30 (6 by maintainers)

Commits related to this issue

Prettier doesn't like handlebars partials https://github.com/prettier/prettier/issues/11834 — committed to phineasla-hcmus/3.1-Web-Online-Auction by phineasla 3 years ago
fix(prettier): remove files with handlebar partials - handlebar partials are not yet supported by prettier, so removing files with errors - https://github.com/prettier/prettier/issues/11834 — committed to nicolasrouanne/ghost-pacific by nicolasrouanne 2 years ago
Automatically format YAML, CSS, and JS files Initially, I also formatted the templates in `theme/`, but this triggers https://github.com/prettier/prettier/issues/11834. So I exclude them for now. — committed to google/comprehensive-rust by mgeisler 9 months ago
Automatically format YAML, CSS, and JS files (#1272) Initially, I also formatted the templates in `theme/`, but this triggers https://github.com/prettier/prettier/issues/11834. So I exclude them for... — committed to google/comprehensive-rust by mgeisler 9 months ago

Most upvoted comments

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

For more details see https://github.com/shpp/programming.org.ua/issues/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"   
      }
    }
  ]
}

SitaGomes on Aug 23, 2023

Any progress on this?

devbytyler on Mar 4, 2023

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

lenovouser on Apr 10, 2023

@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?

bshifrin on Sep 5, 2023

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.

duailibe on Feb 2, 2022

I think we have to add this feature.

itssabhishek on Nov 25, 2021

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

deurk on Apr 21, 2023

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

itssabhishek on Nov 20, 2021

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 on Nov 20, 2021

Can you use issue template?

sosukesuzuki on Nov 20, 2021