Rails: Field 'browser' doesn't contain a valid alias configuration when pushing to Heroku

user_10157635 0
Viewed 6291

Whenever I try pushing my Rails 6 app to Heroku, I kept getting an error message "Precompiling assets failed". I notice from the traceback that it was complaining of "Field 'browser' doesn't contain a valid alias configuration" for the "@fortawesome/fontawesome-free/js/all" import.

Field 'browser' doesn't contain a valid alias configuration
remote:                      /tmp/build_7682b1717ca625690f7939609cc5a51d/app/javascript/@fortawesome/fontawesome-free/js/all doesn't exist
remote:                    .jsx
remote:                      Field 'browser' doesn't contain a valid alias configuration
remote:                      /tmp/build_7682b1717ca625690f7939609cc5a51d/app/javascript/@fortawesome/fontawesome-free/js/all.jsx doesn't exist
remote:                    .mjs
remote:                      Field 'browser' doesn't contain a valid alias configuration
remote:                      /tmp/build_7682b1717ca625690f7939609cc5a51d/app/javascript/@fortawesome/fontawesome-free/js/all.mjs doesn't exist
remote:                    .js
remote:                      Field 'browser' doesn't contain a valid alias configuration
remote:                      /tmp/build_7682b1717ca625690f7939609cc5a51d/app/javascript/@fortawesome/fontawesome-free/js/all.js doesn't exist
remote:                    .sass
remote:                      Field 'browser' doesn't contain a valid alias configuration
remote:                      /tmp/build_7682b1717ca625690f7939609cc5a51d/app/javascript/@fortawesome/fontawesome-free/js/all.sass doesn't exist
remote:                    .scss
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed

Following some suggestions I tried to modify the FontAwesome import in my project from import "@fortawesome/fontawesome-free/js/all" to ```import "./fortawesome/fontawesome-free/js/all" but this did not work for me.

font-awesome heroku ruby-on-rails
1 Answers

I had to check my package.json file, and I discovered the font awesome package was not included under the dependencies list but the devDependencies list, probably because I used the -save-dev option when installing the package with npm istall.

This was my package.json file before I moved the fontawesome package to the dependencies list.

  "dependencies": {
    "@babel/preset-react": "^7.8.3",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.5.0",
    "popper.js": "^1.16.1",
    "prop-types": "^15.7.2",
    "toastr": "^2.1.4",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",
    "webpack-dev-server": "^3.10.3"
  }

After moving the fontawesome package to the dependencies list, I was able to push my app to Heroku successfully.

user_101576350
Related