Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
sarahstrong opened this issue Sep 16, 2020 · 3 comments

Comments

@sarahstrong
Copy link

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
Copy link
Owner

@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
Copy link
Author

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
Copy link
Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants