Rake task "assets:precompile" is failing due to JS Compilation issue

Installation
1

I am trying to do a fresh install for discourse and seeing the below error while running assets:precompile task. I am seeing the below compilation error but not sure what the error is about.

rake aborted!
Barber::PrecompilerError: Pre compilation failed for: {{#if isActive}}
  {{!-- template-lint-disable no-invalid-interactive --}}
  <div {{on "keydown" (action "keydown")}} class="emoji-picker {{if @isActive "opened"}}">
    {{!-- template-lint-enable no-invalid-interactive --}}
    <div class="emoji-picker-category-buttons">
      {{#if recentEmojis.length}}
        <button type="button" data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">
          {{replace-emoji ":star:"}}
        </button>
      {{/if}}

      {{emoji-group-buttons onCategorySelection=(action "onCategorySelection") tagName=""}}

      {{#each-in customEmojis as |group emojis|}}
        <button type="button" data-section={{concat "custom-" group}} {{action "onCategorySelection" (concat "custom-" group)}} class="btn btn-default category-button emoji">
          {{replace-emoji (concat ":" emojis.firstObject.code ":")}}
        </button>
      {{/each-in}}
    </div>

    <div class="emoji-picker-content">
      <div class="emoji-picker-search-container">
        {{input
          class="filter"
          name="filter"
          placeholder=(i18n "emoji_picker.filter_placeholder")
          autocomplete="discourse"
          autocorrect="off"
          autocapitalize="off"
          input=(action "onFilter")
        }}

        {{d-icon "search"}}
      </div>

      <div class="emoji-picker-emoji-area" role="button" {{on "click" this.onEmojiSelection}} {{on "mouseover" this.onEmojiHover}}>
        <div class="results"></div>

        {{#conditional-loading-spinner condition=isLoading}}
          <div class="emojis-container">
            {{#if recentEmojis.length}}
              <div class="section recent" data-section="recent">
                <div class="section-header">
                  <span class="title">{{i18n "emoji_picker.recent"}}</span>
                  {{d-button icon="trash-alt" action=(action "onClearRecents") class="trash-recent"}}
                </div>
                <div class="section-group">
                  {{#each recentEmojis as |emoji|}}
                    {{replace-emoji (concat ":" emoji ":") (hash lazy=true)}}
                  {{/each}}
                </div>
              </div>
            {{/if}}

            {{emoji-group-sections}}

            {{#each-in customEmojis as |group emojis|}}
              <div class="section" data-section="custom-{{group}}">
                <div class="section-header">
                  <span class="title">
                    {{i18n (concat "emoji_picker." group)}}
                  </span>
                </div>
                {{#if emojis.length}}
                  <div class="section-group">
                    {{#each emojis as |emoji|}}
                      <img title={{emoji.code}} width="20" height="20" loading="lazy" class="emoji" src={{emoji.src}}>
                    {{/each}}
                  </div>
                {{/if}}
              </div>
            {{/each-in}}
          </div>
        {{/conditional-loading-spinner}}
      </div>

      <div class="emoji-picker-footer">
        <div class="emoji-picker-emoji-info">
          {{#if hoveredEmoji}}
            {{replace-emoji (concat ":" hoveredEmoji ":")}}
          {{/if}}
        </div>

        <div class="emoji-picker-diversity-picker">
          {{#each diversityScales as |diversityScale index|}}
            {{d-button
              icon=diversityScale.icon
              class=(concat "diversity-scale " diversityScale.name)
              title=diversityScale.title
              action=(action "onDiversitySelection" index)
            }}
          {{/each}}
        </div>
      </div>
    </div>
  </div>

  {{#if site.mobileView}}
    <div role="button" class="emoji-picker-modal-overlay" {{on "click" this.onClose}}></div>
  {{/if}}
{{/if}}

. Compiler said: Error
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/private/env/ruby2.7.x/ruby2.7.x/lib/ruby/gems/2.7.0/gems/barber-0.12.2/lib/barber/precompiler.rb:33:in `rescue in compile'
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/private/env/ruby2.7.x/ruby2.7.x/lib/ruby/gems/2.7.0/gems/barber-0.12.2/lib/barber/precompiler.rb:30:in `compile'
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/private/env/ruby2.7.x/ruby2.7.x/lib/ruby/gems/2.7.0/gems/barber-0.12.2/lib/barber/precompiler.rb:8:in `compile'
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/private/env/ruby2.7.x/ruby2.7.x/lib/ruby/gems/2.7.0/gems/ember-handlebars-template-0.8.0/lib/ember/handlebars/template.rb:166:in `block in precompile_ember_handlebars'
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/private/env/ruby2.7.x/ruby2.7.x/lib/ruby/gems/2.7.0/gems/sprockets-3.7.2/lib/sprockets/cache.rb:85:in `fetch'
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/private/env/ruby2.7.x/ruby2.7.x/lib/ruby/gems/2.7.0/gems/ember-handlebars-template-0.8.0/lib/ember/handlebars/template.rb:165:in `precompile_ember_handlebars'
~/Discourse/Discourse-2.8.x/AL2_x86_64/DEV.STD.PTHREAD/build/rails-root/lib/freedom_patches/raw_handlebars.rb:99:in `call'
2

That does not sound like a standard install ?

2 Likes
3

yeah I am trying to do a custom install on Amazon Linux machine

4

While Discourse is free and open source software, here on Meta we limit our free support to installs following the standard install guide. Since there are infinite combinations of ways to run the software, that allows us to provide an easy to use and always up to date base for all users.

If you are looking to customize Discourse, using either plugins or themes you can change everything while still running a supported install.

2 Likes
5

And if you instead make changes by forking, you’ll be very sorry that you did.

6

I was able to root cause the issue, so essentially while running assets-precompile rake task, it’s trying to load all the js file using hbs templates in emoji-picker.hbs. The template has certain variables which require the data to be fed by caller and this is where the parsing fails. Other hbs file that don’t have ‘@’ reference are getting compiled successfully.

Any idea or documentation around as to how these hbs templates are used in discourse?

7

You could start at Beginner’s Guide to Creating Discourse Plugins Part 1: Creating a basic plugin.