webpacker: Javascript not executing?

I really think this must be something really dumb and am hoping it’s an easy fix.

I was having issues with mini-css-extract-plugin and undefined ‘tap’ method, but everything else was working fine. After some research, I saw the 6_0_upgrade.md doc so figured I’d try that. It did fix my CSS issue but now my Javascript won’t execute in the browser, even though it compiles just fine.

I have stripped my application.js down so it is JUST a console.log statement.

/* eslint no-console:0 */
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

console.log('Hello World, from Webpacker!')

I’ve included this via <%= javascript_pack_tag "application" %>.

When I browse to a page, I can see in dev tools sources tab that it has loaded.

However, it just isn’t console.logging anything. What could I be missing? This worked before going from webpacker 5.x to 6.0.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 18 (5 by maintainers)

Commits related to this issue

chore(FIX): fixing webpacker gem version as stated in https://github.com/rails/webpacker/issues/2955#issuecomment-803527956 — committed to alexamy/electric-circuit-testing-platform by deleted user 3 years ago
Chore: Add tailwind support (#7) * chore: upgrade to webpacker 6 * chore(FIX): fixing webpacker gem version as stated in https://github.com/rails/webpacker/issues/2955#issuecomment-803527956 ... — committed to alexamy/electric-circuit-testing-platform by alexamy 3 years ago
Console logs are now firing from webpacker struggled with issue https://github.com/rails/webpacker/issues/2955 for entirely too long — committed to damwhit/harvest_helper by damwhit 3 years ago

Most upvoted comments

I got the same issue firstly, and I fixed it with @rossta 's reply.

BTW, in gem, if you config gem 'webpacker', '~> 6.0.0.beta.6' in your Gemfile, and exec command bundle update, it will be install 6.0.0.per.2, so I use the fixed version gem 'webpacker', '6.0.0.beta.6' to solve this question.

+21

zzuu666 on Mar 21, 2021

Please make sure the gem versions and NPM packages are identical

@dmbrooking Thanks for the sample repo. Looking through the changeset, it appears that your Webpacker gem and @rails/webpacker NPM package versions are not in sync. Please upgrade both to the latest release. As of this comment, it is 6.0.0.beta.6.

Following the UPGRADE instructions appears to result in installing 6.0.0-pre.2 instead of the latest release, even with the pessimistic version constraint, and using @rails/webpacker@next may result in installing a different version for the npm package then you have for the gem.

I think it would be better to link to the releases page and say something to the effect of “get the latest release.”

gem 'webpacker', '<LATEST_RELEASE>'

yarn add @rails/webpacker@<LATEST_RELEASE>

rossta on Mar 17, 2021

@rossta sorry for the delay in getting back to you but it was the mismatch of versions. I’m good now. I didn’t even notice that. Thanks!

dmbrooking on Apr 1, 2021

@kramerdog

First, let’s make sure you’re using the right gem and NPM versions. As of right now, using the pessimistic version constraint with the webpacker gem will not install the latest beta. See https://github.com/rails/webpacker/issues/2940 for more info.

Run bundle info webpacker and yarn list --pattern @rails/webpacker… the versions should point to the same beta release.

If not, you’ll need to fix it:

Try changing

gem 'webpacker', '~> 6.0.0.beta.6'

To the following and bundle update.

gem 'webpacker', '6.0.0.beta.6'

To get your NPM package on the right version, run

yarn add @rails/webpacker@6.0.0-beta.6

Start there and that may get things working. If not, then revisit the UPGRADE.md docs to doublecheck the rest of the steps.

rossta on Apr 1, 2021

@Elsopuro If you upgrade to the latest versions of both the gem and the NPM package (6.0.0.beta.6 as of this note) then you’ll want to undo that change.

rossta on Mar 17, 2021

Same issue +1

929528 on Mar 16, 2021

i resolved this issue by using github repo as gem source adding beta.7 will always install pre.2 version

saiqulhaq on Jun 13, 2021

In the mean time, I’ve used the next hack to make sure it never reproduces in my codebase:

IO.foreach("package.json").find { |line| line[%r("@rails/webpacker"\s*:\s*"(.*?)")]}
gem "webpacker", Regexp.last_match(1).tr("-", ".")

It feels like there should be a way webpacker checks that for us though!

BuonOmo on Jun 10, 2021

Having the same issue, resolved with solution from https://github.com/rails/webpacker/issues/2955#issuecomment-803527956.

alexamy on Apr 11, 2021

Solved by replacing this = javascript_pack_tag ‘application’ to this = javascript_packs_with_chunks_tag ‘application’

but in upgrade guide upgrade guide written

Change javascript_packs_with_chunks_tag and stylesheet_packs_with_chunks_tag to javascript_pack_tag and stylesheet_pack_tag.

Elsopuro on Mar 17, 2021

Hi @pedrofurtado… thanks for the quick response. Here you go:

https://github.com/dmbrooking/webpacker_test

I went ahead and created a brand new Rails application with rails new, version 6.1.3. That is what is on master branch, on webpacker 5.0 and it works, I get the console.log in the devtools console.

Then I created a branch and a PR, https://github.com/dmbrooking/webpacker_test/pull/1 where you can see the steps I took. I followed this: https://github.com/rails/webpacker/blob/master/6_0_upgrade.md

It is not working there.

Let me know if you need any more info.

dmbrooking on Mar 16, 2021