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.