webpacker: Styles not loaded after upgrade to Rails 6 / Bundler 2

Hello, this may be a little weird but we’re using Rails 6 beta2 for our project, everything was fine but just after we upgraded to bundler 2 styles are not loading anymore in our app.

This is our app structure for webpack:

├── javascript
│   ├── application
│   │   ├── javascripts
│   │   │   └── index.js.erb
│   │   └── stylesheets
│   │       ├── _variables_override.scss
│   │       ├── application.scss
│   │       ├── components
│   │       │   ├── _flash.scss
│   │       │   ├── _footer.scss
│   │       │   ├── _forms.scss
│   │       │   ├── _header.scss
│   │       │   └── index.scss
│   │       ├── index.js.erb
│   │       └── modules
│   │           ├── _base.scss
│   │           ├── _layout.scss
│   │           └── index.scss
│   └── packs
│       └── application.js

Inside packs/application.js:

import '../application/stylesheets/index.js.erb';
import '../application/javascripts/index.js.erb';

and our webpacker.yml :

# 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:
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

staging:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

and layout file:

!!!
%html
  %head
    %meta{ :content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
    %meta{ :content => "width=device-width, initial-scale=1", name: "viewport" }/
    %title= t("website_title")
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload"
    = javascript_pack_tag "application", "data-turbolinks-track": "reload"

    - if Rails.env.development?
      :css
        .translation_missing { color: red !important; }

  %body{ class: controller_name }
    .absolute-wrapper
      = render "shared/header"

      .content-wrapper
        = render "shared/flash"

        .content
          = yield

      = render "shared/footer"

Can someone tell me if I’m missing something? Before upgrading to bundler 2 everything was working fine!

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (8 by maintainers)

Most upvoted comments

Do I need to upgrade to v4 ?

Yes, nice catch @connorshea. @mariogmz see the end of this post.

Inside the layout we have = stylesheet_pack_tag “application”, media: “all”, “data-turbolinks-track”: “reload”, then inside the app/javascript/packs/application.js file:

I meant the resulting html that the browser sees.

it’s important to mention that the app was created using Rails 5.2.2, and then upgraded to Rails 6.

Then you definitely need to follow the upgrade guide.

@jakeNiemiec if I enable hmr: true inside config/webpacker.yml it works, somehow, but it always been set to false

This is because the style-loader is injected, the .js is injecting your css into <head>. This will not work in production.

@mariogmz In short, start with:

bundle update webpacker
rails webpacker:binstubs
yarn upgrade @rails/webpacker --latest
yarn add webpack-dev-server@^3.1.14

Then follow the steps in: https://github.com/rails/webpacker/blob/master/docs/v4-upgrade.md#webpacker-upgrade-guide

That should fix you up nicely.

@jakeNiemiec I removed the .erb extension, still not working, it was working before the upgrade tho

@JakeLaCombe Worked like a charm! Thank you so much.

Why do the logs say webpack 3.12? Webpacker 4 is supposed to use webpack 4.x (or, I think it is?)

@mariogmz Let’s address some easy questions first (in order):

styles are not loading anymore in our app.

  • Did you need to follow the v4 upgrade guide? (if relevant)
  • Does your build complete without errors?
  • Can you see the resulting .css file in the manifest.json file?
  • Do you see an indication of the css file in the html? How are you loading the styles?