How do I make that JS errors don't prevent Trix from working?

Question

This is related to this question.

I figured out that there is some JS file that is throwing an error that seems to be preventing Trix from executing properly (or at all).

This is what my app/javascript/packs/application.js looks like:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("local-time").start()

window.Rails = Rails

import '../src/popper.min'
import '../src/jquery.min'
import 'bootstrap'

import '../src/aos'
// import '../src/clipboard.min'
// import '../src/jquery.fancybox.min'
// import '../src/flatpickr.min'
// import '../src/flickity.pkgd.min'
// import '../src/ion.rangeSlider.min'
// import '../src/isotope.pkgd.min'
// import '../src/jarallax.min'
// import '../src/jarallax-video.min'
// import '../src/jarallax-element.min'
// import '../src/jquery.countdown.min'
// import '../src/jquery.smartWizard.min'
// import '../src/plyr.polyfilled.min'
// import '../src/prism'
// import '../src/scrollMonitor'
// import '../src/smooth-scroll.polyfills.min'
// import '../src/svg-injector.umd.production'
// import '../src/svg-injector'
// import '../src/twitterFetcher_min'
// import '../src/typed.min'
// import '../src/theme'

$(document).on("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

import "controllers"

require("trix")
require("@rails/actiontext")

I tried putting the require("trix") calls at the top of this file and it still doesn't work.

Given all of the JS dependencies here, is there anyway I can make sure the trix and actiontext files get executed regardless?

Answer 1

Try this universal answer: comment line by line in your *.js file step by step

Answer 2

Given all of the JS dependencies here, is there anyway I can make sure the trix and actiontext files get executed regardless?

No, all the files have to run without error.

Of course, you could wrap them in try catch blocks, but that probably won't work if you need them to provide functionality for your app.

$(document).on("turbolinks:load", () => { $('[data-toggle="tooltip"]').tooltip() $('[data-toggle="popover"]').popover() })

Does it still happen if you delete the code above? That doesn't really belong there (see the comment from webpack at the top of your code)

Answer 3

You're able to tell your browser to ignore Javascript errors by overwriting the window.onerror function. It's generally not recommended to do this as it can cause unexpected behaviour, and it's generally better to have code running without errors. Error handling is a good thing!

That being said, this will stop the errors from causing your script to stop running.

function errorIgnorer() {
   return true;
}

window.onError = errorIgnorer;

The MDN docs say that certain event listeners will still fire, regardless. You're likely able to use a similar method to remove the error handling in these cases as well.

Answer 4

You can try placing the non funcional code inside a try-catch and putting the files you want executed regardless of the try-catch result inside a finally {} block