Why does my console.log statement stop working using webpack and rails

Question

I setup a new rails app using webpack. The default console.log shows up fine when I run the app.

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

Now if I simply add file here:

/app/javascript/packs/application.scss

And I restart the rails s, the console.log disappears.

Is there some kind of a conflict?

So to summarize, the console.log message works in my new rails app with --wepack. The moment I do this:

1. add application.scss in the /app/javascript/packs folder
2. Reference the application.scss in my layout

The console.log message stops working. I start/stop the rails s and still no console.log message.

Answer 1

This is indeed a problem that I encountered today.

What worked for me as to create a subfolder inside app/javascript/packs folder.

My directory now looks like this:

• app/javascript/packs/stylesheets/application.scss
• app/javascript/packs/application.js

In my application.haml

• = javascript_pack_tag 'application'
• = stylesheet_pack_tag 'stylesheets/application'

If I put the application.scss in the same directory as application.js the console.log() stops working as you suggest.

My guess is that since both are named application, webpacker confuses on which file must be loaded on javascript_pack_tag and stylesheet_pack_tag.

That is why moving it on a different directory will solve the problem in my case.