Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'trix-toolbar'. A type with that name is already registered.

[sarahstrong]

I have a Rails project that's being gradually ported over to React. I need to render a Trix editor in both the old Rails UI and the new React UI. React-trix-rte throws Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'trix-toolbar'. A type with that name is already registered. when require('trix') is present in application.js.

I can get around this by adding the check window.customElements.get("trix-editor")|| before r.registerElement("trix-editor") and window.customElements.get("trix-toolbar")|| before r.registerElement("trix-toolbar") in the minified JS but I can't seem to find where to add this check in the non-minified source of either this project or trix itself.

Thoughts on how to get around this issue? Thank you for your time!

[abhaynikam]

@sarahstrong thanks for reporting the issue. I was able to reproduce the issue and I think removing require("trix") from application.js should resolve your issue. I tried adding Trix editor using Rails and via React-Trix-RTE and it works fine at both places.

React Trix RTE already adds trix dependency and since your application for old Rails UI and React will pipeline the trix via webpacker. It would be available in both cases and shouldn't cause any problems.

Please do let me know if I am missing anything here. 😊

[sarahstrong]

Thanks so much for the quick response! I'm getting a non-editable text area with no errors in the console in my old Rails UI with require("trix") removed from my application.js. I believe that's what I'd expect to see if Trix wasn't being picked up at all. This is after yarn add react-trix-rte and confirming that works in the React part of my site.

[sarahstrong]

Oh man, I wasn't requiring react-trix-rte in my application.js, only importing it in the React component itself. Requiring it pulls in the Trix for the rest of the site. Thank you for your help!