Getting errors in Rails asset:pipeline with Webpacker and Heroku

Question

I have a Rails 5.1.4 app that I inherited that is deployed to Heroku. It is using webpacker with vuejs and am now having problems deploying to Heroku. I am getting the following message when Heroku run rake assets:precompile:

remote:        [13] ./app/javascript/production-guarantee-component.vue 193 bytes {0} [built] [failed] [1 error]
remote:        [14] ./app/javascript/packs/tmp_dashboard.js 2.44 kB {1} [built]
remote:        + 4 hidden modules
remote:        ERROR in ./app/javascript/adder-dashboard.vue
remote:        Module parse failed: Unexpected token (1:0)
remote:        You may need an appropriate loader to handle this file type.
remote:        | <template>
remote:        |   <div class="col-md-12">
remote:        |       <adder-component v-for="category in categories" :category ="category"></adder-component>
remote:        @ ./app/javascript/packs/pricing_dashboard.js 16:0-52
remote:        ERROR in ./app/javascript/app.vue
remote:        Module parse failed: Unexpected token (1:

The code runs fine locally and the Module parse failed doesn't even really make sense to me. What is a good first place to look to debug?

Answer 1

usually node_modules is added to .gitignore. I suggest you to test your app in local production env. Run RAILS_ENV=production bundle exec rake assets:precompile to precompile your assets in production.

If you are installing js dependencies with yarn, the rails precompiling should trigger also yarn install, then run the production server rails s -e production and test it in localenvironment

Also you need to find out the github repository from adder-dashboard.vue and read the documentation about using vue.js with rails

https://ksylvest.com/posts/2016-09-07/augmenting-a-ruby-on-rails-app-with-vue-js

https://rlafranchi.github.io/2016/03/09/vuejs-and-rails/

Use Dropzone.js with Vue.js

https://coligo.io/real-time-analytics-with-nodejs-socketio-vuejs/