Webpacker: `javascript_pack_tag` doesn't output any HTML

[drusepth]

Hi, I just did a fresh install of webpacker 3.5 into an existing Rails 5.1 app. I ran webpacker:install and everything looks fine. I noticed in app/javascript/packs/application.json it mentions:

// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

So, I added <%= javascript_pack_tag 'application' %> to my app/views/layouts/application.html.erb (and, well, commented everything else out just to make sure there were no conflicts):

My application.js pack looks like:

/* 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')

So, I would expect to see that message in my console, no? I run ./bin/webpacker and it looks like things compile correctly, and then I run rails server.

$ ./bin/webpack-dev-server 
Project is running at http://localhost:3035/
webpack output is served from /packs/
Content not from webpack is served from /Users/abrown/Code/sv2/public/packs
404s will fallback to /index.html
Hash: 6fc51c254881fbcdd744
Version: webpack 3.12.0
Time: 562ms
                                  Asset       Size  Chunks                    Chunk Names
    application-8d71e5035f8940a9e3d3.js     331 kB       0  [emitted]  [big]  application
application-8d71e5035f8940a9e3d3.js.map     383 kB       0  [emitted]         application
                          manifest.json  142 bytes          [emitted]         
   [2] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {0} [built]
   [3] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0} [built]
   [4] ./node_modules/url/url.js 23.3 kB {0} [built]
   [7] ./node_modules/url/util.js 314 bytes {0} [built]
   [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [14] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
  [15] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
  [16] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
  [18] ./node_modules/html-entities/index.js 231 bytes {0} [built]
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [25] ./app/javascript/packs/application.js 515 bytes {0} [built]
    + 11 hidden modules
webpack: Compiled successfully.

However, when I open my served rails page in a browser, the browser console is empty. (I also replaced the console.log with an alert to make things more obvious and ran ./bin/webpack-dev-server to make sure it recompiled, but also didn't see anything.) So I went and checked the HTML of the page, and I see that there is no <script> tag being output from <%= javascript_pack_tag 'application' %>.

To debug, I intentionally changed the name to not-existing and got the following error, so I know it's at least executing that javascript_pack_tag line (_and_ finding one named application):

I also modified the application.js pack with some invalid javascript just to make sure the JS file I'm looking at is being compiled into the pack. Webpack fails on compilation (as expected), so I would think the rest of the code (when it is valid and compiled correctly) should be included on the page.

For posterity, the failed build:

webpack: Compiling...
Hash: 3922e2de1a82dfd414ff
Version: webpack 3.12.0
Time: 145ms
                                  Asset       Size  Chunks                    Chunk Names
    application-8921d381c853eebc866b.js     331 kB       0  [emitted]  [big]  application
application-8921d381c853eebc866b.js.map     383 kB       0  [emitted]         application
                          manifest.json  142 bytes          [emitted]         
   [2] multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js 40 bytes {0}
   [3] (webpack)-dev-server/client?http://localhost:3035 7.93 kB {0}
   [4] ./node_modules/url/url.js 23.3 kB {0}
   [7] ./node_modules/url/util.js 314 bytes {0}
   [8] ./node_modules/querystring-es3/index.js 127 bytes {0}
  [11] ./node_modules/strip-ansi/index.js 161 bytes {0}
  [12] ./node_modules/ansi-regex/index.js 135 bytes {0}
  [13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0}
  [14] (webpack)-dev-server/client/socket.js 1.08 kB {0}
  [15] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0}
  [16] (webpack)-dev-server/client/overlay.js 3.67 kB {0}
  [18] ./node_modules/html-entities/index.js 231 bytes {0}
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0}
  [25] ./app/javascript/packs/application.js 442 bytes {0} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./app/javascript/packs/application.js
Module build failed: SyntaxError: Unexpected token, expected ; (12:8)

  10 | console.log('Hello World from Webpacker')
  11 | 
> 12 | invalid javascript
     |         ^
  13 | 

BabelLoaderError: SyntaxError: Unexpected token, expected ; (12:8)

  10 | console.log('Hello World from Webpacker')
  11 | 
> 12 | invalid javascript
     |         ^
  13 | 

    at transpile (/Users/abrown/Code/sv2/node_modules/babel-loader/lib/index.js:65:13)
    at /Users/abrown/Code/sv2/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/Users/abrown/Code/sv2/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:242:13)
 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/application.js
webpack: Failed to compile.

Could anyone please advise on what I should look towards to ensure that <%= javascript_pack_tag 'application' %> is actually working? Somewhere between looking up the pack and actually including it on the page seems to be causing an issue, but I'm not sure where to look.

Happy to provide additional information (if I didn't information overload already). Thank you!

$ ruby -v
ruby 2.3.1p112 (2016-04-26 revision 54768) [x86_64-darwin17]
$ rails -v
Rails 5.1.6
$ yarn -v
1.7.0

[drusepth]

For what it's worth, I was able to find a workaround for this by mimicking the javascript_pack_tag source.

Rather than using <%= javascript_pack_tag 'application' %>, I am able to include the JS on the page by doing <%= javascript_include_tag sources_from_pack_manifest(['application'], type: :javascript).first %> instead.

Obviously, it's a suboptimal solution, but seems to work for anyone else getting this issue.

[shama009]

@drusepth I am kind of running into similar issue. I am new to ruby on rails and using webpack for the first time. Trying to enable webpack on existing rails application. I am using webpacker gem for rails and installed using “rails webpacker:install”. It created all config files to use webpack. Ideally it should install all required dependencies too but a few were missing(babel plugins) I did that and compilation was successful with no errors. But nothing is rendered on browser when I hit localhost:3035(webpack running on port 3035, rails app running on port 3004). I donot see any console errors too. I tried to use <%= javascript_include_tag sources_from_pack_manifest(['application'], type: :JavaScript).first %> as you suggested but it didn't work for me. Do you have any suggestions or resources that I can look up to resolve my issue? Appreciate your help. Happy to provide more details. Thank you.
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Rails 5.2.1
yarn 1.9.4
"@rails/webpacker": "4.0.0-pre.2",
"webpack": "^4.17.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
FYI: I am using vagrant Ubuntu VM on VirtualBox.
Host: windows
Guest: Ubuntu/trusty64
I was expecting to see console.log message from application.js on browser console. I did not add any additional configuration. Do I have to add anything? If yes could you please point me to a resource where I can find instructions on doing additional set up. Any help is greatly appreciated. Thank you.

[danielpowell4]

@shama009 did you ever have any luck? My guess is that you have moved on to other things, but if not, I'm happy to try and give you a hand!

[milieu]

I'm running into this issue too on 5.2 Rails with webpacker ~> 3.5, while on a react-rails to react_on_rails migration attempt.

Workaround was to simply add the javascript_pack_tag in front of every react_component tag rendered by Rails... but it's such a hack :/

[TarasBardiuk]

I think I found the cause of this problem.
I bet you have the application.js and application.css files inside the packs directory, right?
Webpacker works with styles in a special way, generating a file with the same name as the css-file, but in the format .js.
So, I guess, when there is already generated application.js for application.css, true application.js file will be skipped.
So, just use different names for your main application front-end files, e.g. styles.css and javascript.js