Skip to main content

Conflict between Chartkick gem and Trix Editor

Javascript • Asked by Trevor Owens
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.

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 22,346+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.