stylesheet_pack_tag not finding app/javascript/src/application.css in rails 5.1 with webpacker gem

Question

stylesheet_pack_tag not finding app/javascript/src/application.css in rails 5.1 with webpacker gem

15k views Asked by wuliwong At 13 September 2024 at 10:56

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!

Original Q&A

There are 9 answers

Jonatas Eduardo On 15 December 2020 at 17:59

Revise Insallation Guide

Revise the version of webpacker (in package.json and Gemfile.lock with git story) if had recent changes withou you concerns.

All major errors are fixed when you revise: installation official guide

For me, for example, after revised I needed to add some files in /packs/application.js, include this at the top of the file:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

Maxim Khan-Magomedov On 06 August 2018 at 12:00

I had the same problem and solved it with running yarn add postcss-smart-import in console.

upd: rails 5.2, webpacker 3.5, default config.

mungojerie On 06 December 2018 at 12:20

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:

Rename the directory to app/webpack
Adjust webpacker.yml like so: source_path: app/webpack

Hope that helps.

Johan On 15 June 2018 at 08:12

In "config/environments/production.rb":

config.public_file_server.enabled = true

Delete "public/assets" and "public/pack"

And run:

RAILS_ENV=production bundle exec rake assets:precompile

Shadow Debugger On 09 June 2020 at 08:22

I had this problem or Rails 6.0.3.1. I updated the file app/assets/config/manifest.js

//= link_directory ../../javascript/packs
//= link_directory ../images

Then restart in your terminal:

bin/webpack-dev-server

Rimian On 28 December 2020 at 22:43

I cleared webpacker's cache and it started working again for me:

rm -rf tmp/cache/webpacker

Jay Bennett On 14 October 2018 at 05:19

When HMR is set to false the styles are inlined within the bundle so you won't get any css bundle. In your webpacker.yml file, setting hmr to true should fix your problem. I realize this is an old question. Relevant, though.

Senid On 25 June 2020 at 08:40

I had such problem even with import "path/to/application.css" line in application.js

In my case it was because test assets was precompiled with different node version

node modules was installed with node version v12 but test assets was compiled with with node version v10

assets were compiled but when I've looked inside public/pack-test/application.[hash].js and grep application.scss I saw an error line about node-sass missing.

In my cause problem was with Rubymine IDE - it somehow cache $PATH value from time when I had default node version v10 in nvm.

I hope my store will have somebody, who will encounter similar issue in future.

**Snake** · Accepted Answer · 2017-09-08 07:04:01

In your application.js :

import "path to application.css"

TechQA.

stylesheet_pack_tag not finding app/javascript/src/application.css in rails 5.1 with webpacker gem

There are 9 answers

Revise Insallation Guide

Related Questions in CSS

Related Questions in RUBY-ON-RAILS-5

Related Questions in WEBPACKER

Popular Questions

Popular Tags

Trending Questions