Using Parcel with Handlebars

Question

I would like to use Handlebars with Parcel, but without importing handlerbars partials, but having them in a script tag in html.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Autocomplete!</title>
  <link rel="stylesheet" href="./public/stylesheets/whitespace-reset.css">
  <link rel="stylesheet" href="./public/stylesheets/gallery.css">
  <script type="module" src="./public/typescript/gallery.ts"></script>
</head>

<body>
  <main>
    <h1>Amanda Rose's Photos</h1>
    <div id="slideshow">
      <div id="slides">
        <figure data-id="1">
          <img src="https://via.placeholder.com/1280x1024" />
          <figcaption>
             Some text.
          </figcaption>
        </figure>
        <figure data-id="2">
          <img src="https://via.placeholder.com/1280x1024/ffffff/0066cc" />
          <figcaption>
             Some text.
          </figcaption>
        </figure>
        <figure data-id="3">
          <img src="https://via.placeholder.com/1280x1024/0066cc/ffffff" />
          <figcaption>
            Some text.
          </figcaption>
        </figure>
      </div>
      <ul>
        <li><a class="prev" href="#">Prev</a></li>
        <li><a class="next" href="#">Next</a></li>
      </ul>
    </div>

    <section>
      <header>
        <h2>City Lights</h2>
        <p><time>Taken on 3/31/15</time></p>
        <div class="actions">
          <a href="/api/photos/like" data-id="1" data-property="likes" class="button like">
            ♡ 5 Likes
          </a>
          <a href="/api/photos/favorite" data-id="1" data-property="favorites" class="button favorite">
            ☆ 2 Favorites
          </a>
        </div>
      </header>
      <!-- code omitted -->
    </section>
  </main>
  <script id="photos" type="text/x-handlebars">
    {{#each photos}}
    <figure data-id="{{id}}">
      <img src="{{src}}" />
      <figcaption>{{caption}}</figcaption>
    </figure>
    {{/each}}
  </script>
  <!-- code omitted -->

</body>

</html>

The issue that I have is that Parcel is saying that I am missing transformers for handlebars. Since these partials are not in a separate file adding

  "transformers": {
    "*.hbs": [
      "parcel-transformer-handlebars"
    ]
  }

to my .parcelrc file won't do a thing even when I install parcel-plugin-handlebars.

Does anyone have an idea how to change this? I have tried changing transformers to plugin-transformers-handlebars for html files but this messes up everything else.

Using Parcel with Handlebars

0 Answers0