Skip to content

Commit e768b39

Browse files
author
Daniel Ma
committed
feat(UJS) show helpful error messages for missing components
The Problem ----------- Currently, if you use an invalid component name in `data-react-class`, you get a React invariant error that only tells you that the component class was undefined, but it doesn't actually help you fix the error. I end up needing to scroll backwards in the stack trace until I find this part of the `react_ujs_mount.js` code and inspect the value of `className` The Solution ------------ Throw a helpful error (and nice console log message) about an invalid className at the moment we try to mount the component.
1 parent 861572b commit e768b39

File tree

1 file changed

+8
-1
lines changed

1 file changed

+8
-1
lines changed

lib/assets/javascripts/react_ujs_mount.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,14 @@
5757
var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
5858
var props = propsJson && JSON.parse(propsJson);
5959

60-
ReactDOM.render(React.createElement(constructor, props), node);
60+
if (typeof(constructor) === "undefined") {
61+
var message = "Cannot find component: '" + className + "'"
62+
if (console && console.log) { console.log("%c[react-rails] %c" + message + " for element", "font-weight: bold", "", node) }
63+
var error = new Error(message + ". Make sure your component is globally available to render.")
64+
throw error
65+
} else {
66+
ReactDOM.render(React.createElement(constructor, props), node);
67+
}
6168
}
6269
},
6370

0 commit comments

Comments
 (0)