Summernote on Rails Production broken - ruby-on-rails

I'm having some trouble with getting Summernote to work correctly on my production Rails environment (on Heroku). I'm using rails 4.2.0, bootstrap 4.1.3, and summernote-rails 0.8.10.0.
Everything works fine locally but is broken on production.
There are no errors when the editor loads but as soon as you click in to any of the text fields there are the following errors:
First-
Uncaught TypeError: Cannot read property 'hide' of undefined
at e.hide (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.update (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at e.update (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at HTMLTextAreaElement.summernote.mousedown (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at HTMLTextAreaElement.dispatch (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.m.handle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:32)
at Object.trigger (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.<anonymous> (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at Function.each (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:22)
Second-
Uncaught TypeError: t.slice is not a function
at i (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:139)
at e.current (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:139)
at e.currentStyle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:140)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at e.updateCurrentStyle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at e.invoke (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:142)
at HTMLTextAreaElement.<anonymous> (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:141)
at HTMLTextAreaElement.dispatch (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
at HTMLTextAreaElement.m.handle (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:32)
at Object.trigger (application-817b47c5cec07e4f230739dba0885233c6c215d78b973ccec6560fa46ec08080.js:33)
Both these js errors seem to be coming from Bootstrap.
Also, I guess it does "work" on production but it the extra input fields and just looks broken. Like so-
Anyone got any ideas? Thanks!

I upgraded to Rails 5 and that fixed the minification problem.

Related

CableReady (Rails) Basic case giving mystifying error message

cable_ready 4.5.0
rails 6.1.4.1
ruby 3.0.2p107
This is a simple example from the basic tutorial (https://www.youtube.com/watch?v=F5hA79vKE_E) I suspect the error I am getting is because either cable_ready or rails evolved a little and created a tiny incompatibility.
I get this error in the JS console:
It is triggered when in my controller I ask cable ready to:
cable_ready["timeline"].console_log(message: "***** cable ready post created")
Which leads to my timeline_channel to:
received(data) {
console.log("******** Received data:", data.operations)
if (data.cableReady) CableReady.perform(data.operations)
}
My interpretation is perform causes this line in cable_ready.js line 13:
operations.forEach(function (operation) {
if (!!operation.batch) batches[operation.batch] = batches[operation.batch] ? ++batches[operation.batch] : 1;
});
Is finding something in the received data that it doesn't like.
That's where my trail ends. Can someone see what I am doing wrong, or tell me what other code you'd like me to include?
Solution: downgrade the version of the cable_ready javascript library.
I previously (maybe a year ago) did this tutorial using CableReady 4.5, Ruby 2.6.5 and Rails 6.0.4 and it worked like a charm back then as well as today.
But today, I tried this tutorial again on a duplicate project--same versions of CR, Ruby, and Rails and now I get java console errors similar to yours.
TypeError: undefined is not a function (near '...operations.forEach...')
perform -- cable_ready.js:13
received -- progress_bar_channel.js:8
I looked at the output of yarn list and saw that cable_ready was version 5.0.0-pre8 on the bad project and it was 5.0.0-pre1 on the good project. The downgrade could be accomplished with yarn add cable_ready#^5.0.0-pre1 in the bad project folder and now both projects work.
FYI for other newbies like me trying to understand how CableReady works: This tutorial gives another example of CableReady, and was also fixed the same way.

jQuery acts differently after Rails upgrade

I'm upgrading an old Rails 3.0 application that uses jQuery 1.8.2.
The code below used to work on our Rails 3 app, but now throws Uncaught TypeError: Cannot read property 'status' of null:
$.ajax(...).always(function(data){
console.log(data.status);
})
I do know how to fix this JS issue (function(data, textStatus, xhr) ... xhr.status), but what I don't understand is how that could have worked before the upgrade, and what made the behaviour change.
$().jquery; returns "1.8.2" on both Rails 3 and Rails 5, and we use the same jquery-min file

Highcharts more and highcharts guage issue

My high charts more is giving the following erro:
highcharts-more.js:29 Uncaught TypeError: I is not a function
I am calling the highcharts-more on the page with the folllowing:
https://code.highcharts.com/highcharts-more.js
I see that the highcharts-more file has been updated today. If I use the older version which is:
https://code.highcharts.com/4.2.2/highcharts-more.js
Then I start getting error in the solid-guage.js which is as follows:
solid-gauge.js:12 Uncaught TypeError: t is not a function
Plus the gayge fill color is not functioning properly as well.
Updating my local file highcharts.js to latest version solved the issue as, highcharts-more and solid-guage being called from website were updated to new versions along with highcharts.js.

Code from dart2js is throwing NoSuchMethodErrors for get$functions

My Polymer.dart web app, that works fine in Dartium, is giving the following error (it repeats seven times) when compiled with dart2js using pub build --mode=debug and loaded in Chrome.
Resource interpreted as Script but transferred with MIME type text/plain: "http://confab.dev/index.html_bootstrap.dart". confab.dev/:10
warning: file:///home/dan/projects/confabulous/webatara/web/index.html.0.dart library not found index.html_bootstrap.dart.js:17188
Uncaught Error: NoSuchMethodError: Cannot call "get$functions" on "#<JsLibraryMirror>" (Object #<JsLibraryMirror> has no method 'get$functions') index.html_bootstrap.dart.js:17188
Stack Trace:
TypeError: Object #<JsLibraryMirror> has no method 'get$functions'
at dart._loadLibrary (http://confab.dev/index.html_bootstrap.dart.js:20000:19)
at dart._loadLibraries (http://confab.dev/index.html_bootstrap.dart.js:19917:11)
at dart._initPolymerOptimized (http://confab.dev/index.html_bootstrap.dart.js:19908:7)
at dart.initPolymer (http://confab.dev/index.html_bootstrap.dart.js:19902:7)
at main (http://confab.dev/index.html_bootstrap.dart.js:4112:7)
at _IsolateContext.eval$1 (http://confab.dev/index.html_bootstrap.dart.js:1369:23)
at dart.startRootIsolate (http://confab.dev/index.html_bootstrap.dart.js:1145:21)
at http://confab.dev/index.html_bootstrap.dart.js:26514:7
at init.currentScript (http://confab.dev/index.html_bootstrap.dart.js:26494:5)
at http://confab.dev/index.html_bootstrap.dart.js:26508:3
index.html_bootstrap.dart.js:17188
Uncaught NoSuchMethodError: Cannot call "get$functions" on "#<JsLibraryMirror>" (Object #<JsLibraryMirror> has no method 'get$functions') index.html_bootstrap.dart.js:2369
Because source maps don't appear to work (they're turned on in Chrome, and I have .map files), I don't even know which part of my code is causing this.
I've tried with interop.js included both before dart.js, as the docs say, and after, as this issue says.
Looks like a bug in dart2js. Please file an issue, ideally with a reproducible test-case.
pub upgrade fixed it. It turns out that something had replaced the polymer 0.9.5 that I'd been using with 0.8.10+4. Quite odd. The solution to this is to set the polymer version as '>= 0.9.5' instead of 'any', which I will do eventually, but for now I'm interested to see if it happens again.

rails & markdown error: uncaught exception: Control.TextArea requires Object.Event to be loaded

So, I've got bluecloth installed and I'm trying to use the Control.TextArea javascript WYSIWYG editor.
Anyways, I followed the tutorial on the page and when I load the corresponding view, I get an error:
uncaught exception: Control.TextArea requires Object.Event to be loaded.
This comes from Control.TextArea js file.
Any ideas? Thanks

Resources