CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Mohd.Zafranudin
Mohd.Zafranudin

Reputation: 454

Rails 5.2: Issue with jquery-rails

I am developing Rails 5.2 application, and everything works fine under development mode. The main focus is the javascript manifest.

app/assets/javacripts/application.js

//= require rails-ujs
//= require jquery3
//= require activestorage
//= require turbolinks
//= require_tree .

And the jquery-rails is already included: gem 'jquery-rails'

The jquery from manifest works fine during development, but when I deploy to production with RAILS_ENV=production, the debug console throws me an error.

Uncaught TypeError: wt.each is not a function
    at application-f391c00e32925e724aeeeafb89a9def5fe54c457b371cab55c13d97dc54382cd.js:formatted:789
    at application-f391c00e32925e724aeeeafb89a9def5fe54c457b371cab55c13d97dc54382cd.js:formatted:9
    at application-f391c00e32925e724aeeeafb89a9def5fe54c457b371cab55c13d97dc54382cd.js:formatted:10

Sometimes it is given as xt:

Uncaught TypeError: xt.each is not a function
    at application-01f2edddc7a85d2c9e116d47f0c8eb10e41b5d6a06d8832122e5545bb2d1068f.js:formatted:1340
    at application-01f2edddc7a85d2c9e116d47f0c8eb10e41b5d6a06d8832122e5545bb2d1068f.js:formatted:559
    at application-01f2edddc7a85d2c9e116d47f0c8eb10e41b5d6a06d8832122e5545bb2d1068f.js:formatted:560

and the error leads to this line of code:

wt.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "), function(t, e) {
    ht["[object " + e + "]"] = e.toLowerCase()
});

But when I checked the original Jquery code, it's not wt (or sometimes xt), but w:

w.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" ") 
// The code goes on

I suspect that Rails did some changing behind the scene, and how can I fix this?

Here are some things that I have tried:

  1. Use assets from public folder the standard way: [Works Fine]

  2. Use other version of jquery, i.e., jquery, jquery2, jquery3: [Not Working]

Currently I am using method 1 above as current workaround, but my project is not organized such way.

Thank you in advance

Upvotes: 1

Views: 1170

Answers (1)

Mohd.Zafranudin
Mohd.Zafranudin

Reputation: 454

After having frustrations for days, I found out the main issue.

uglifier

Removing/commenting out uglifier from my production's initializer seems to work. Although it is not hygienic to have uncompressed assets, it still works.

It seems Uglifier did some mangling behind the scene (which changes the variable name), along with compression. Setting the option of mangle: false did not work out for me, even with harmony: true for unknown reason.

Check out the documentation to see if there's any option that might works out for your specific need.

https://github.com/lautis/uglifier

You can configure uglifier in app/assets/production.rb with the following:

config.assets.js_compressor = Uglifier.new(harmony: true, mangle: false)

It didn't work for me, thus I simply commented out that particular line, until I'm able to figure out how to work around it.

# Didn't work, commenting out
#
# config.assets.js_compressor = Uglifier.new(harmony: true, mangle: false)

Upvotes: 1

Related Questions