Menu
I am receiving this error when I try to load a page in my new rails 5.1 app using webpacker. I would like webpacker to handle CSS as well.
Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400 Processing by HomeController#welcome as HTML Rendering home/welcome.html.erb within layouts/application Rendered home/welcome.html.erb within layouts/application (0.4ms) Completed 500 Internal Server Error in 28ms ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes: 1. You want to set wepbacker.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-1ba6db9cf5c0fb48c785.js", "hello_react.js": "/packs/hello_react-812cbb4d606734bec7a9.js" } ): 7: <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 8: <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 9: <%= javascript_pack_tag 'application' %> 10: <%= stylesheet_pack_tag 'application' %> 11: </head> 12: 13: <body> app/views/layouts/application.html.erb:10:in `_app_views_layouts_application_html_erb__1178607493020013329_70339213085820' I am running the ./bin/webpack-dev-server alongside the rails server. I created the app using:
rails new myapp --webpack bundle bundle exec rails webpacker:install:react
I have a single CSS file app/javascript/src/application.css. (Writing that makes me feel something is wrong. Putting css inside of a javascript directory seems improper.)
I just have single root route defined root to: 'home#welcome'.
Here is app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title>Myapp</title> <%= csrf_meta_tags %> <%= javascript_pack_tag 'application' %> <%= stylesheet_pack_tag 'application' %> </head> <body> <%= yield %> </body> </html> Here is my config/webpacker.yml (I have tried also setting compile to false in development.
# Note: You must restart bin/webpack-dev-server for changes to take effect default: &default source_path: app/javascript source_entry_path: packs public_output_path: packs cache_path: tmp/cache/webpacker # Additional paths webpack should lookup modules # ['app/assets', 'engine/foo/app/assets'] resolved_paths: [] # Reload manifest.json on all requests so we reload latest compiled packs cache_manifest: false extensions: - .coffee - .erb - .js - .jsx - .ts - .vue - .sass - .scss - .css - .png - .svg - .gif - .jpeg - .jpg development: <<: *default compile: true dev_server: host: localhost port: 3035 hmr: false https: false test: <<: *default compile: true # Compile test packs to a separate directory public_output_path: packs-test production: <<: *default # Production demands on precompilation of packs prior to booting for performance. compile: false # Cache manifest.json for performance cache_manifest: true I don't want to add too many details up-front incase they are more distracting then helpful. Please ask for anything else and I'll add to my question. Thanks!
215
In your application.js :
import "path to application.css" I had this exact problem, on Rails 5.2 with Webpack's current version as of Dec 5, 2018 (4.2.x?) and just resolved it.
The fix for me was renaming application.css to anything else. I think there was a naming collision with Webpack.
So now my pack tags look like:
<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> I did NOT need to import the stylesheet inside application.js. This appears to make no difference for me.
OPTIONAL BONUS: I also renamed the app/javascript to app/webpack because I also thought it was confusing to run styles out of a Javascript directory (and learned from this youtube video that it could be done: https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s). Simply:
app/webpack webpacker.yml like so: source_path: app/webpack Hope that helps.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
