Webpacker: application.js is somehow ignored until renamed something else

[Drillan767]

Hello,

I've encountered something that looks like a bug, but I can't tell much of it because everything works on branch 'master' but not in any other branches.

I basically installed Webpacker and React, verified that everything worked by adding the <%= javascript_pack_tag 'application' %> tag in my layout got the message in my console, then changed branches and started to work on some server side elements, and never touched anything JS related during this time. I also didn't run bin/webpack-dev-server during this time too.

When I decided the back-end was done for now, I checked again if Webpacker was still okay, but nothing, the console log didn't show "Hello World from Webpacker", and this even after reinstalling Webpacker, via Rails, NPM and Yarn.

I noticed however that if I changed <%= javascript_pack_tag 'application' %> to <%= javascript_pack_tag 'hello_react' %>, everything works perfectly, I get to see "Hello React" on the top of my screen.

So I renamed 'app/javascript/application.js' to something else, like "front", and it works. I don't really know if this is a bug, or maybe I missed something (but after 3 reinstallation this seems odd), but this isn't the first time this happens.

I also don't believe this is an emergency bug since I can work with the renamed file, but I just wanted to let you guys know.

[gauravtiwari]

@Drillan767 That sounds strange and I can't reproduce this in fresh rails app with webpacker. How is your JS application setup? Can you please share folder structure?

[Drillan767]

@gauravtiwari Maybe it comes from my environment, that's why I don't believe this is an emergency bug, my folder structure is basic, I didn't move anything around, just added controllers, models and such, and I didn't use any Javascript during this time.

My folder structure looks like this:

 -assets
   -config
     -manifest.json
 -images
    -.keep
 -javascripts
   -channels
      -.keep
   -application.js
    -cable.js
  -stylesheet
    -application.css
  -channels/application_cable
    -channel.rb
    -connection.rb
  -controllers
    -concerns
      -.keep
    -[all my controllers]
  -helpers
    -[application_helper.rb + helpers created with controller]
  -javascript
    -packs
      -application.js (contains "Hello world from webpacker")
      -hello_react.jsx
  -jobs
    -application_jobs.rb
  -mailer
    -application_mailer.rb
  -models
    -concers
      -.keep
    -[application_record + my models]
  -uploaders
    -[.rb files created via CarrierWave]
  -views
    -[basic views organized in folders]
  assets
bin
config
db
lib
log
public
test
vendor

[pparidans]

Actually, I just encountered the same issue on a new application (with webpacker added after project creation).
In my case, renaming the packs/application.js to packs/bundle.js fixed it.

Environment:

• ruby 2.4.3
• node 8.9.4
• rails 5.1.4
• webpacker 1.3.2
• Ubuntu 16.04.3

[Drillan767]

I have the feeling that if the file will be ignored if it has the same base name as the layout it's called in. I'm having the same trouble with my "administration" part, that uses a layout named admin.html.erb, that calls a file named admin.js. Here again, the file gets ignored when I interact with it.

[iSarCasm]

Just encountered the same problem with
rails new xxx --skip-coffee --skip-sprockets --skip-turbolinks --webpack --database=postgresql -T
and

default: &default
  source_path: frontend
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

Using anything else than application.js as filename helped.

[2potatocakes]

I feel like there's still a bug in here somewhere, I don't have a proper fix sorry. But I can add some more context though if it helps? We ran into this same problem recently too.

When there is a packs/application.scss or packs/application.sass file present, the compiled application.js file gets clobbered somehow:

                                                    Asset       Size  Chunks                    Chunk Names
                 server_rendering-1cd7da0de5919f67dff2.js    1.97 MB       0             [big]  server_rendering
                      application-4a4c7cb5b17c867bab6e.js     331 kB       1  [emitted]  [big]  application

Rather than renaming the packs/application.js file, if you rename the packs/application(.scss|.sass) file to application.css it won't clobber the application.js file and everything seems to be working fine now.

                                                    Asset       Size  Chunks                    Chunk Names
                 server_rendering-0e72dcaf91452c1af636.js    1.97 MB       0  [emitted]  [big]  server_rendering
                      application-d685fde8f66e8c0345dd.js    1.97 MB       1  [emitted]  [big]  application

Perhaps there's a problem with the sass-loader?

[rossta]

@2potatocakes That is happening because that is how we've configured Webpack—to produce output bundles that match the name of the entry file. To produce application.js and application.css output files, you would have one entry file: app/javascript/packs/application.js and, from that file (or anywhere in its dependency graph), you would import your css file(s), which should live outside of the packs directory.

Here's one way to do it:

// app/javascript/packs/application.js
import 'application.css'

```shell
app/
javascript/
application.css
packs/
application.js

Edit: As of webpacker > 5.1.1, it will be possible to use separate js and css/scss/sass files of the same canonical name in the 'packs' directory bundled as a single entrypoint. For example:

```shell
app/
  javascript/
    // src...
    packs/
      application.js
      application.css

[2potatocakes]

ahhh... @rossta !! Thanks so much mate 🙌 Your suggestion fixes the issue for me. This was incredibly difficult to identify what was going wrong.
Would it be worth explaining this behaviour a bit more explicitly here: https://github.com/rails/webpacker#usage ?

[rossta]

@Drillan767 Can this issue be closed?

[Drillan767]

Absolutely!