application.scss silently breaks javascript

[JoseMPena]

versions & Setup

pachages.json

"dependencies": {
    "@rails/webpacker": "^3.2.2",
    "rails-ujs": "^5.1.5",
    "stimulus": "^1.0.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.11.1"
  }

Gemfile.lock

komponent (1.1.3)
      webpacker (>= 3.0.0)

application.html.erb

<%= stylesheet_pack_tag    'application' %>

frontent/packs/application.js

import "rails-ujs";
import 'components';
console.log("Hello world");

Steps to Reproduce:

A)

1. Create an empty file: frontent/packs/application.scss
2. Launch servers

Expected: "Hello World" to be displayed in console Actual: No "Hello World" message even tho compilation finishes with no error.

B)

1. Rename file frontent/packs/application.scss to frontent/packs/application.css
2. Launch servers

Expected: "Hello World" to be displayed in console Actual: Success!

Note

webpack-dev-server has to be restarted between changes to see the issue.

[Spone]

Thank you for the bug report, we'll investigate.

[Spone]

It may be related to https://github.com/webpack-contrib/sass-loader/issues/403

[Spone]

@JoseMPena can you check which version of sass-loader is installed? (see yarn.lock)

[JoseMPena]

@Spone

sass-loader@^6.0.6:
  version "6.0.6"
  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.6.tgz#e9d5e6c1f155faa32a4b26d7a9b7107c225e40f9"
  dependencies:
    async "^2.1.5"
    clone-deep "^0.3.0"
    loader-utils "^1.0.1"
    lodash.tail "^4.1.1"
    pify "^3.0.0"

[Spone]

That is weird because it's supposed to be fixed with sass-loader 6.0.3

I'm not sure it an issue with Komponent.

Do you reproduce it without komponent, only webpacker and sass-loader?

[florentferry]

Hello @JoseMPena,

This issue is not related with Komponent. I made some investigation on it, seems using application.scss pack is not the recommended way. The official Webpacker guide and issues related to that point are pretty confusing.

You have two possibilities:

• Create your file in app/javascript/packs/src/application.scss
• Add stylesheet_pack_tag 'application' in your template
• Add import "./src/application.scss"; in your app/javascript/packs/application.js

or

• Create your file in app/javascript/packs/application.css
• Add stylesheet_pack_tag 'application' in your template

I am closing this issue. Feel free to open an issue on Webpacker to be more explicit about that point.

[JoseMPena]

I just found a workaround. Moving application.scss from frontend/packs somewhere else, say, frontend/support and just require it in application.js

import "../support/application.scss";

And it all works like a charm :)

[JoseMPena]

@florentferry I posted the previous comment before refreshing this page 😝