All threads / Conflict between Chartkick gem and Trix Editor

Ask A Question

Notifications

You’re not receiving notifications from this thread.

Conflict between Chartkick gem and Trix Editor

Trevor Owens asked in Javascript
I'm getting an error on pages that use chartkick (both highcharts and chart.js) due to the Trix Editor. Everything works fine but the error being thrown concerns me.

Anyone have thoughts?

Error with Chart.js

Uncaught DOMException: Failed to execute 'registerElement' on 'Document': Registration failed for type 'trix-toolbar'. A type with that name is already registered.
    at Object.e.registerElement (eval at <anonymous> (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22)), <anonymous>:16:26500)
    at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22)), <anonymous>:17:9896)
    at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22)), <anonymous>:17:10290)
    at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22)), <anonymous>:22:2244)
    at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22)), <anonymous>:22:2362)
    at eval (<anonymous>)
    at eval (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22), <anonymous>:350:22)
    at Function.globalEval (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22), <anonymous>:351:7)
    at text script (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22), <anonymous>:10373:11)
    at ajaxConvert (eval at <anonymous> (http://localhost:3000/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350:22), <anonymous>:9333:18)

Error with Highcharts.js

Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
    at Object.a.error (highcharts.self-2d5d4b77c48d035111dc8833f1f00e209e9acfb2956499a10ab4487a04bb2883.js?body=1:11)
    at eval (eval at <anonymous> (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350), <anonymous>:10:38)
    at eval (eval at <anonymous> (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350), <anonymous>:11:12)
    at eval (eval at <anonymous> (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350), <anonymous>:9:103)
    at eval (eval at <anonymous> (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350), <anonymous>:9:109)
    at eval (<anonymous>)
    at jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:350
    at Function.globalEval (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:351)
    at text script (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10373)
    at ajaxConvert (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:9333)

Initially the Trix Editor wouldn't load at all, but then I put trix.js on a lower line than chartkick and highcharts/chart.js in my application.js and now the Trix Editor loads fine and so do the charts but it throws this error.
Fixed this myself.

There was no conflict between the two gems, I had a syntax error in my JS where I made the ajax call.
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 37,629+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.