cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
sdtriathlete
Community Participant

Getting 422 (Unprocessable Entity) error when loading custom JavaScript

I added a custom JavaScript function via the 'custom JavaScript' file upload in the Theme Editor and it adds it fine there, but when it loads a page in Canvas it doesn't load my custom JavaScript but shows an error in the console: ERR_ABORTED 422 (Unprocessable Entity). It seems to load custom CSS just fine. When I copy the link text and paste it into another browser window I see this:

<!DOCTYPE html> <html class="scripts-not-loaded" dir="ltr"   lang="en"> <head>   <meta charset="utf-8">   <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>   <link href="https

That's it. What could be the problem?

The JavaScript I added is essentially a basic test just waiting for document.ready and then showing a simple alert when the user clicks an element...again...not real code yet...just testing capability for a future project that will rely on this custom JS working:

$(document).ready(function () {
   $('.my.class').addEventListener("click", function() {
      alert("Hello World");
   });
});
Tags (1)
0 Kudos
4 Replies
jfpoirier
Community Member

Hi there.

We've just started using Canvas LMS as an internal training system and LTI integration development platform. We're running the Production Start Guide version, with code pulled from Canvas' github, tag release/2020-12-16.47.

We're hitting the exact same issue as sdtriathlete, in that custom javascript files in themes are not served by the file download controller and receive instead a 422 error code, along with CSRF-related failures in production.log.

This seems to be a regression from a (much earlier) fix for the exact same issue (see commit at https://github.com/instructure/canvas-lms/commit/c18b389a70fd227b3d61a82356316f2481ae5006).

The files_controller.rb code that was targeted in the above commit has been refactored since, and seems to have introduced that regression?

We intended to use javascript to customise the login page to show a button to direct users to our SSO provider rather than an Apache redirect, which is what we'll have to do for now.

Can Canvas at least point us in the direction of a possible patch (we're not ruby experts, unfortunately)?

Much appreciated!
Jean-François Poirier
X2O Media Inc.

sdtriathlete
Community Participant

I still need help with this issue, having never received a response from Canvas. It seems years ago this was addressed in a PR by Graham Ballentyne (?), yet perhaps there was a regression in code, or perhaps it is similar, but different? In any case, any help to solve this is appreciated.

jsimon3
Community Participant

Try this:

if (document.readyState !== "loading") {
  console.info("hello world");};
sdtriathlete
Community Participant

Thanks a lot for posting a reply here. I really appreciate anyone taking the time to answer a question.  I can try that code you posted, but I think the problem is deeper...lower as the custom JS is rejected due to CORS (Cross-Origin Resource Sharing) I think. Let me ask you: When you look at the custom JS tab under Themes and it shows your custom JS filename specified there, does it show an IP Address or your domain name? I suspect that t might be blocked because it is being loaded with an ip address instead of the domain name that matches the server. Can you confirm?