Multi tool use

Getting errors in Rails asset:pipeline with Webpacker and Heroku

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:

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?

Module parse failed

1 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.

node_modules

.gitignore

RAILS_ENV=production bundle exec rake assets:precompile

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

yarn

yarn install

rails s -e production

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

adder-dashboard.vue

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/

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.