Ask A Question

Notifications

You’re not receiving notifications from this thread.

Webpacker error from Vue.js Trello Clone Series

Victor Bordo asked in Rails
Hey all, I have an error that I just can't get to the bottom of. While going through the awesome Vue.js Trello Clone tutorial I started seeing this:

(Webpacker can't find application.css in /trello-clone/public/packs/manifest.json. Possible causes:

1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your Webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/application-7842a75bb83838259e67.js",
  "application.js.map": "/packs/application-7842a75bb83838259e67.js.map",
  "hello_vue.js": "/packs/hello_vue-dbd5bbf8a9e291bb9804.js",
  "hello_vue.js.map": "/packs/hello_vue-dbd5bbf8a9e291bb9804.js.map"
}

5: <%= csrf_meta_tags %>
6: <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
7: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
8: <%= stylesheet_pack_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9: <%= javascript_pack_tag    'application', 'data-turbolinks-track': 'reload' %>

app/views/shared/_head.html.erb:8:in `_app_views_shared__head_html_erb__735179485141049708_47026379830620'
app/views/layouts/application.html.erb:4:in `_app_views_layouts_application_html_erb__3379803321119273693_47026379974400'

I've tried adding the application.css file, setting the compile config values in webpacker.yml, recompiling webpacker to force the path changes, clearing the assets using:

rails tmp:clear assets:clobber

I've downgraded the webpack-dev-server as per this issue https://github.com/rails/webpacker/issues/1303

I've also tried pulling down the final version of the clone from Github and running it in a Docker container and still actually get the same issue. I'm sure it's something small on the config side that I'm doing incorrectly. I'm working on a Mac running High Sierra (10.13.3). Any guidance is much appreciated, thanks! 

Reply
You can get that error if you made a typo because it can't compile the file. Try checking your code for errors.
Reply
Couldn't spot any typos so I rolled back to the second commit (where I am in the tutorial) on master and now it's working which rules out a config err. I'm sure you're right and it was a little typo. Just needed some fresh eyes. Thanks for responding so fast Chris! GoRails is a fantastic resource and I'm already learning Rails rapidly thanks to you.
Reply
I get a similar error with my own Rails 5.2/VueJS application when deploying to heroku. The application runs fine without errors locally, so I don't think a typo in my JS code could be the reason. The manifest.json file is created fine, but other than that, my public/packs folder remains empty. Any hints as to in which file I made have a typo to cause this error?
Reply
Ok, my mistake was, that I used webpack version 4, which is not compatible with the latest release of the webpacker gem. Downgrading webpack to version 3 solved the problem – now assets are compiled.
Reply
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 73,895+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.