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.
Reply
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.
Reply
Join the discussion
Create an account Log in

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

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

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