Overview
Unlayer provides its own React and ReactDOM instances for React-based Custom Tools. This ensures that your Custom Tool uses the same React version as the editor, helping to avoid compatibility issues.
If your Custom Tool bundles its own React or ReactDOM dependencies, it may become incompatible with the version used by the Unlayer editor.
Why Compatibility Issues Occur
As the Unlayer editor evolves, the bundled React version may also change to take advantage of performance improvements, new features, and ongoing maintenance.
If your Custom Tool includes its own React or ReactDOM package, both versions may coexist within the same application, which can lead to unexpected behavior or runtime errors.
To ensure compatibility, your Custom Tool should use the React and ReactDOM instances provided by the Unlayer editor rather than bundling its own copies.
Common Symptoms
If your Custom Tool is using its own React dependencies, you may experience issues such as:
The Custom Tool fails to load.
The Custom Tool appears blank or displays an error.
Runtime errors related to React or ReactDOM.
Unexpected rendering behavior.
Compatibility issues after moving to a newer version of the Unlayer editor.
Recommended Approach
To maintain compatibility with the Unlayer editor:
Use the React and ReactDOM instances provided by Unlayer.
Do not bundle your own React or ReactDOM dependencies with your Custom Tool.
Ensure your Custom Tool is compatible with the React version currently used by the Unlayer editor.
Follow the official React Custom Tool example when building or updating your implementation.
Best Practices
Avoid including duplicate React dependencies in your Custom Tool bundle.
Keep your Custom Tool compatible with the React version provided by Unlayer.
Test your Custom Tool whenever adopting a newer version of the Unlayer editor.
Refer to the official example when implementing React-based Custom Tools.