Javascript not executing?

[dmbrooking]

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.

[pedrofurtado]

Hi @dmbrooking ! 👋

Can you provide us a reproducible repo with this situation? If so, it will be possible to help you in a more assertive way 🍻

[dmbrooking]

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, dmbrooking/webpacker_test#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.

[929528]

Same issue +1

[Elsopuro]

same issue +1

webpacker.yml.txt
Gemfile.txt
webpacker.log.txt
application.js.txt

[rossta]

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>

[Elsopuro]

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.

[rossta]

@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.

[929528]

@rossta fix that issue. thks

[zzuu666]

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.

[kramerdog]

I think I am having the same problem as everyone else here but cant really tell what I need to do from the commentary above.

I have just upgraded my webpacker gem to beta,6 but have tried so many other things I am not sure where I am at.

I am using Rails 6.1 and most of my "Javascript" is in .coffee files.

I even tried renaming application.js to application.coffee and reformatting but that didnt work either.

My Gemfile has

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

I have done the following"

yarn add jquery jquery-ui-dist jquery-blockui

Then in webpacker 6 style configured as follows:

# config/webpacker/base.js
const { webpackConfig, merge } = require('@rails/webpacker')

const customConfig = require('./custom')

module.exports = merge(webpackConfig, customConfig)

# config/webpacker/custom.js
module.exports = {
    resolve: {
        alias: {
            jquery: 'jquery/src/jquery',
            jquery_ui: 'jquery-ui-dist/jquery-ui.js'
        }
    }
}

and

# code/app/packs/entrypoints/application.js

global.$ = require("jquery")
require("jquery") // Don't really need to require this...
require("jquery-ui")
require("jquery-ui-dist/jquery-ui")

This is all a mish-mash of attempts from a number of sources including this post https://stackoverflow.com/questions/57555708/rails-6-how-to-add-jquery-ui-through-webpacker, https://github.com/rails/webpacker and others.

By the way, I am trying to migrate Coffescript from Rails 5 and so this makes extensive use of the JQuery $ global.

Any help much appreciated.

[rossta]

@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 #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.

[dmbrooking]

@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!

[kramerdog]

@rossta - thanks, I think that was it, not having the matching beta.6 yarn version of webpacker installed.

I did also seemingly have to do the following:

# config/webpack/custom.js
const webpack = require('webpack')

module.exports = {
    resolve: {
        alias: {
            $: 'jquery/src/jquery',
            jQuery: 'jquery/src/jquery',
            jquery: 'jquery',
            'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ],
    // Eliminate CORS issue
    devServer: {
        host: 'localhost',
        port: 3000
    }
}

and:

# app/packs/entrypoints/application.js
global.$ = require('jquery'), require('jquery-ui'), require('jquery-blockui')

I dont know if that is consistent with your expectations? Commenting any of the above out meant that some kind of error was returned when executing Javascript - maybe I am missing something else?

Anyway, it does all seem to be working now so thanks!

[alexamy]

Having the same issue, resolved with solution from #2955 (comment).

[BuonOmo]

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!

[saiqulhaq]

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

[dhh]

Version pickup issue fixed with 6.0.0.rc1.

[Almaya]

In my case I had to run yarn build --watch and that solved it.