Another error message improvement

Author: cknitt

compiler/ml/error_message_utils.ml

@@ -228,6 +228,12 @@ let is_variant_type ~(extract_concrete_typedecl : extract_concrete_typedecl)
     | _ -> false
   with _ -> false
 
+let is_jsx_component_type ~env ty =
+  match Ctype.expand_head env ty with
+  | {desc = Tconstr (Pdot (Pident {name = "Jsx"}, "component", _), _, _)} ->
+    true
+  | _ -> false
+
 let get_variant_constructors
     ~(extract_concrete_typedecl : extract_concrete_typedecl) ~env ty =
   match extract_concrete_typedecl env ty with
@@ -438,6 +444,17 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
       \  - Use a tuple, if your array is of fixed length. Tuples can mix types \
        freely, and compiles to a JavaScript array. Example of a tuple: `let \
        myTuple = (10, \"hello\", 15.5, true)"
+  | _, Some ({desc = Tarrow _}, expected)
+    when is_jsx_component_type ~env expected ->
+    fprintf ppf
+      "\n\n\
+      \  A React component is expected here, but this expression is a plain \
+       function.\n\n\
+      \  Possible solutions:\n\
+      \  - Extract it to a component annotated with @{<info>@react.component@} \
+       or @{<info>@react.componentWithProps@}\n\
+      \  - If this is already a valid component-like value, wrap it with \
+       @{<info>React.component(...)@}"
   | _, Some (_, {desc = Tconstr (p2, _, _)}) when Path.same Predef.path_dict p2
     ->
     fprintf ppf

tests/build_tests/super_errors/expected/jsx_component_prop_plain_function.res.expected

@@ -0,0 +1,19 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_component_prop_plain_function.res:19:46-58
+
+  17 │ }
+  18 │ 
+  19 │ let _ = <List itemSeparatorComponent={_props => React.null} />
+  20 │ 
+
+  This has type: 'a => 'b
+  But it's expected to have type:
+    React.component<List.separatorProps> (defined as
+      Jsx.component<List.separatorProps>)
+
+  A React component is expected here, but this expression is a plain function.
+
+  Possible solutions:
+  - Extract it to a component annotated with @react.component or @react.componentWithProps
+  - If this is already a valid component-like value, wrap it with React.component(...)

tests/build_tests/super_errors/expected/recursive_component_create_element_requires_component.res.expected

@@ -9,4 +9,10 @@
 
   This has type: props<'a> => React.element
   But this function argument is expecting:
-    React.component<'b> (defined as Jsx.component<'b>)
+    React.component<'b> (defined as Jsx.component<'b>)
+
+  A React component is expected here, but this expression is a plain function.
+
+  Possible solutions:
+  - Extract it to a component annotated with @react.component or @react.componentWithProps
+  - If this is already a valid component-like value, wrap it with React.component(...)

tests/build_tests/super_errors/fixtures/jsx_component_prop_plain_function.res

@@ -0,0 +1,19 @@
+module React = {
+  type element = Jsx.element
+  @val external null: element = "null"
+  type componentLike<'props, 'return> = Jsx.componentLike<'props, 'return>
+  type component<'props> = Jsx.component<'props>
+
+  external component: componentLike<'props, element> => component<'props> = "%component_identity"
+  @module("react/jsx-runtime")
+  external jsx: (component<'props>, 'props) => element = "jsx"
+}
+
+module List = {
+  type separatorProps = {index: int}
+
+  @react.component
+  let make = (~itemSeparatorComponent: React.component<separatorProps>) => React.null
+}
+
+let _ = <List itemSeparatorComponent={_props => React.null} />