note that you need to unwrap options in JSX

Author: zth

compiler/ml/error_message_utils.ml

@@ -259,7 +259,10 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
       "@,\
        @,\
        Possible solutions: @,\
-       - Rewrite the object to a record, like: @{<info>%s@}@,"
+       - Rewrite the object to a record%s@{<info>%s@}@,"
+      (match suggested_rewrite with
+      | Some _ -> ", like: "
+      | None -> "")
       (match suggested_rewrite with
       | Some rewrite -> rewrite
       | None -> "")
@@ -312,6 +315,15 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
       print_jsx_msg "string" (with_configured_jsx_module "string")
     | _ when Path.same p Predef.path_float ->
       print_jsx_msg "float" (with_configured_jsx_module "float")
+    | [_] when Path.same p Predef.path_option ->
+      fprintf ppf
+        "@,\
+         @,\
+         You need to unwrap this option to its underlying value first, then \
+         turn that value into a JSX element.@,\
+         For @{<info>None@}, you can use @{<info>%s@} to output nothing into \
+         JSX.@,"
+        (with_configured_jsx_module "null")
     | [tp] when Path.same p Predef.path_array && is_jsx_element tp ->
       print_jsx_msg
         ~extra:

tests/build_tests/super_errors/expected/jsx_type_mismatch_option.res.expected

@@ -0,0 +1,14 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_type_mismatch_option.res:17:13-16
+
+  15 │ }
+  16 │ 
+  17 │ let x = <> {None} </>
+  18 │ 
+
+  This has type: option<'a>
+  But it's expected to have type: React.element (defined as Jsx.element)
+  
+  You need to unwrap this option to its underlying value first, then turn that value into a JSX element.
+  For None, you can use React.null to output nothing into JSX.

tests/build_tests/super_errors/fixtures/jsx_type_mismatch_option.res

@@ -0,0 +1,17 @@
+@@config({
+  flags: ["-bs-jsx", "4"],
+})
+
+module React = {
+  type element = Jsx.element
+  type componentLike<'props, 'return> = 'props => 'return
+  type component<'props> = Jsx.component<'props>
+
+  @module("react/jsx-runtime")
+  external jsx: (component<'props>, 'props) => element = "jsx"
+
+  type fragmentProps = {children?: element}
+  @module("react/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
+}
+
+let x = <> {None} </>