stylesheet_pack_tag not emitting anything

[Sirius-KiH]

Using webpacker 6.0.0-rc5.

My = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' emits nothing, i.e. no link tag is being rendered.

I have a folder structure like this:

app
|
---- frontend
     |
     ---- entrypoints
          |
          ---- application.js
          ---- application.scss

The application.scss is properly picked up and compiled to the output directory. My manifest.json looks like this:

{
  "application.css": "/packs/css/application.css",
  "application.js": "/packs/js/application.js",
  "css/application.css.map": "/packs/css/application.css.map",
  "entrypoints": {
    "application": {
      "assets": {
        "js": [
          "/packs/js/runtime.js",
          "/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-8bd44b.js",
          "/packs/js/application.js"
        ],
        "css": [
          "/packs/css/application.css"
        ]
      }
    }
  },
  "js/application.js.map": "/packs/js/application.js.map",
  "js/runtime.js.map": "/packs/js/runtime.js.map",
  "js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-8bd44b.js": "/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-8bd44b.js",
  "js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-8bd44b.js.map": "/packs/js/vendors-node_modules_rails_activestorage_app_assets_javascripts_activestorage_js-node_modules-8bd44b.js.map",
  "runtime.js": "/packs/js/runtime.js",
  "static/anonym_48x48.png": "/packs/static/dda23e38aeed6db0a70e.png",
  "static/anonym_500x500.png": "/packs/static/876ab1a5d7cd3d6d77cc.png",
  "static/logo.svg": "/packs/static/722c8c56502d7185db67.svg"
}

Webpacker config:

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/frontend
  source_entry_path: entrypoints
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/webpacker
  webpack_compile_output: true
  extract_css: true

  # Additional paths webpack should look up modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    # Hot Module Replacement updates modules while the application is running without a full reload
    hmr: false
    client:
      # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
      overlay: true
      # May also be a string
      # webSocketURL:
      #  hostname: "0.0.0.0"
      #  pathname: "/ws"
      #  port: 8080
    # Should we use gzip compression?
    compress: true
    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
    allowed_hosts: "all"
    pretty: true
    headers:
      'Access-Control-Allow-Origin': '*'
    static:
      watch:
        ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

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

production:
  <<: *default

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

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  #cache_manifest: true

And finally, my package.json:

{
  "name": "app",
  "private": true,
  "version": "0.1.0",
  "scripts": {
    "watch": "bin/webpack --watch --progress"
  },
  "dependencies": {
    "@fullhuman/postcss-purgecss": "4.0.3",
    "@rails/actioncable": "6.1.4-1",
    "@rails/activestorage": "6.1.4-1",
    "@rails/ujs": "6.1.4-1",
    "@rails/webpacker": "6.0.0-rc.5",
    "@tailwindcss/aspect-ratio": "0.2.1",
    "@tailwindcss/forms": "0.3.3",
    "@tailwindcss/line-clamp": "0.2.1",
    "@tailwindcss/typography": "0.4.1",
    "autoprefixer": "10.3.4",
    "babel-loader": "8.2.2",
    "css-loader": "^6.2.0",
    "css-minimizer-webpack-plugin": "3.0.2",
    "easymde": "2.15.0",
    "file-loader": "6.2.0",
    "postcss": "8.3.6",
    "postcss-loader": "6.1.1",
    "sass": "1.40.1",
    "sass-loader": "12.1.0",
    "spectre.css": "0.5.9",
    "style-loader": "^3.2.1",
    "tailwindcss": "2.2.15",
    "turbolinks": "5.2.0",
    "webpack": "5.52.1",
    "webpack-cli": "4.8.0",
    "babel-plugin-macros": "3.1.0",
    "mini-css-extract-plugin": "2.3.0",
    "postcss-flexbugs-fixes": "5.0.2",
    "postcss-import": "14.0.2",
    "postcss-preset-env": "6.7.0"
  },
  "devDependencies": {
    "@webpack-cli/serve": "1.5.2",
    "webpack-dev-server": "4.2.1"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  }
}

[thomasdarde]

when you start webpack does it use port 3035 ? I'm trying to debug a config quite similar

[0xifis]

I am running into a similar problem as well.

[Sirius-KiH]

I don't use the dev_server. For development I run bin/webpack --watch and for deployment bundle exec rails webpacker:compile, the problem persists with both commands. The issue isn't that the bundles are not compiled or not correctly entered into the manifest.json, as on that side everything is how it should be.

[thomasdarde]

Reading this : https://github.com/rails/webpacker/compare/v6.0.0.beta.7...a1778d7de53d64b7605ea8f49b61c3bdf86980a4

I understand the following:

• you can keep using rc5 with webpack dev server 3 but then you need to set hmr to false.
• or you can try to update wepback dev server to version 4 but then you will need to be careful setting up the host (still not set on my side but this is helping : https://github.com/rails/webpacker/pull/3122 )

In the end once everything is better webpacker will be a smaller wrapper to webpack-dev-server

[guillaumebriday]

Can you create a reproduction repo? Because everything seem to be working just fine with the files you provide

[thomasdarde]

Thanks for closing this, in the end it did work for us but hard to explain exactly what is the change we made, we don't have the extract_css option in wepbacker. using rails webpacker:install helped us cleaning up the configuration.