Uncaught Error: Compile Error: Unexpected Helper fa-icon @ 80..87

[antoinesimonin]

Hi everyone,

Is your feature request related to a problem? Please describe.
Error in console (screen at the bottom)
Uncaught Error: Compile Error: Unexpected Helper fa-icon @ 80..87

Describe the solution you'd like
I would like to recover my home page and filters display on it. At least fix those JS error (font awesome. I tryed this :
https://github.com/FortAwesome/font-awesome-sass :

Import the FontAwesome styles in your app/assets/stylesheets/application.css.scss. The font-awesome-sprockets file includes the sprockets assets helper Sass functions used for finding the proper path to the font file.

@import "font-awesome-sprockets";
@import "font-awesome";

Describe alternatives you've considered
I don't have alternatives

Additional context
I'm trying to fix a heroku app updated from stack cedar14 to heroku18.
I had to update many dependencies.

here gemfile :

source 'https://rubygems.org'
ruby '2.6.5'

gem 'dotenv-rails', :groups => [:development, :test]

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '>= 4.2.5.1'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby 

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

gem 'ember-cli-rails'

gem 'restforce'

gem 'responders'

gem 'active_model_serializers', '~> 0.10.0'

gem 'json'

gem 'actionpack-action_caching'

gem 'redis-rails'

gem 'postmark-rails'

gem 'rack-attack'

gem 'tzinfo-data'

gem 'font-awesome-sass', '~> 5.12.0'

# Cross-Origin Resource Sharing
gem 'rack-cors', :require => 'rack/cors'

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug'
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> in views
  gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :production do
  gem 'pg'
  gem 'puma'
end

gem 'rails_12factor', group: [:staging, :production]

here package.json file

{
  "name": "spie",
  "version": "0.0.0",
  "description": "Small description for spie goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "start": "ember server",
    "test": "ember test"
  },
  "repository": "",
  "engineStrict": true,
  "engines": {
    "node": "12.16.1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@ember/optional-features": "^1.3.0",
    "@glimmer/component": "^1.0.0",
    "@glimmer/tracking": "^1.0.0",
    "babel-eslint": "^10.1.0",
    "broccoli-asset-rev": "^3.0.0",
    "ember-auto-import": "^1.5.3",
    "ember-ajax": "^5.0.0",
    "ember-cli": "^3.17.0",
    "ember-cli-app-version": "3.2.0",
    "ember-cli-autoprefixer": "0.8.0",
    "ember-cli-babel": "^7.19.0",
    "ember-cli-content-security-policy": "1.1.1",
    "ember-cli-dependency-checker": "3.2.0",
    "ember-cli-htmlbars": "^4.2.3",
    "ember-cli-inject-live-reload": "^2.0.2",
    "ember-cli-html5-validation": "0.1.*",
    "ember-cli-ic-ajax": "0.2.5",
    "ember-cli-moment-shim": "3.7.1",
    "ember-cli-pagination": "3.1.5",
    "ember-cli-qunit": "4.4.0",
    "ember-cli-rails-addon": "0.8.0",
    "ember-cli-release": "0.2.9",
    "ember-cli-sass": "^10.0.1",
    "ember-cli-shims": "1.2.0",
    "ember-cli-sri": "2.1.0",
    "ember-cli-uglify": "^3.0.0",
    "ember-data": "3.17.0",
    "ember-data-filter": "1.13.0",
    "ember-disable-proxy-controllers": "1.0.2",
    "ember-export-application-global": "2.0.1",
    "ember-fetch": "^7.0.1",
    "ember-i18n": "5.3.0",
    "ember-inflector": "3.0.1",
    "ember-load-initializers": "2.1.1",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-modal-dialog": "2.4.1",
    "ember-moment": "7.0.1",
    "ember-power-select": "4.0.0",
    "ember-qunit": "^4.6.0",
    "ember-source": "~3.17.0",
    "ember-resolver": "^7.0.0",
    "ember-rl-month-picker": "0.1.0",
    "ember-rl-year-picker": "0.2.0",
    "ember-searchable-select": "0.11.0",
    "ember-template-compiler": "^1.9.0-alpha",
    "ember-template-lint": "^2.4.0",
    "ember-truth-helpers": "2.0.0",
    "eslint": "^6.8.0",
    "eslint-plugin-ember": "^7.10.1",
    "eslint-plugin-node": "^11.0.0",
    "font-awesome":"4.7.0",
    "handlebars": "^4.7.6",
    "jquery": "^3.4.1",
    "loader.js": "^4.7.0",
    "moment": "^2.24.0",
    "node-sass": "4.13.1",
    "npm-run-all": "^4.1.5",
    "qunit-dom": "^1.1.0",
    "qunit": "^2.9.3",
    "sass": "^1.26.3",
    "sifter": "^0.5.4"
  }
}

Here the error in console :

Here the home page in error :

Here the home page expected (prod waiting to be updated) :

I'm beginner to manage JS dependencies, and I don't have a huge experience on JS.
Let me know if you need more informations on the app structure !

Thanks for help,

Regards,
Antoine.

[antoinesimonin]

Hi,
It was just about Font Awesome syntax. Switching from an old version to 4.7.

Regards.

[jrjohnson]

Thanks for following up and closing!