Webpacker error from Vue.js Trello Clone Series

Rails • Asked March 3, 2018 12:12am by Victor Bordo

Victor Bordo 70 XP March 3, 2018 12:12am

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!

Chris Oliver 211,960 XP March 3, 2018 12:19am

You can get that error if you made a typo because it can't compile the file. Try checking your code for errors.

Victor Bordo 70 XP March 3, 2018 1:15am

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.

Matthias Orgler 190 XP May 28, 2018 6:24pm

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?

Matthias Orgler 190 XP May 28, 2018 8:23pm

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.