add dedicated JSX element type mismatch errors

zth · zth · commit 991dfb616f70 · 2025-05-22T18:17:12.000+02:00
diff --git a/compiler/bsc/rescript_compiler_main.ml b/compiler/bsc/rescript_compiler_main.ml
@@ -12,30 +12,33 @@
 
 let absname = ref false
 
-(* TODO: Maybe there's a better place to do this init. *)
 module Error_message_utils_support = struct
   external to_comment : Res_comment.t -> Error_message_utils.Parser.comment
     = "%identity"
   external from_comment : Error_message_utils.Parser.comment -> Res_comment.t
     = "%identity"
-end
 
-let () =
-  Error_message_utils.Parser.parse_source :=
-    fun source ->
-      let res =
-        Res_driver.parse_implementation_from_source ~for_printer:false
-          ~display_filename:"<none>" ~source
-      in
-      ( res.parsetree,
-        res.comments |> List.map Error_message_utils_support.to_comment )
+  let setup () =
+    (Error_message_utils.Parser.parse_source :=
+       fun source ->
+         let res =
+           Res_driver.parse_implementation_from_source ~for_printer:false
+             ~display_filename:"<none>" ~source
+         in
+         (res.parsetree, res.comments |> List.map to_comment));
 
-let () =
-  Error_message_utils.Parser.reprint_source :=
-    fun parsetree comments ->
-      Res_printer.print_implementation parsetree
-        ~comments:(comments |> List.map Error_message_utils_support.from_comment)
-        ~width:80
+    (Error_message_utils.Parser.reprint_source :=
+       fun parsetree comments ->
+         Res_printer.print_implementation parsetree
+           ~comments:(comments |> List.map from_comment)
+           ~width:80);
+
+    Error_message_utils.configured_jsx_module :=
+      Some
+        (match !Js_config.jsx_module with
+        | React -> "React"
+        | Generic {module_name} -> module_name)
+end
 
 let set_abs_input_name sourcefile =
   let sourcefile =
@@ -66,6 +69,7 @@ let process_file sourcefile ?kind ppf =
      properly
   *)
   setup_outcome_printer ();
+  Error_message_utils_support.setup ();
   let kind =
     match kind with
     | None ->
diff --git a/compiler/ml/error_message_utils.ml b/compiler/ml/error_message_utils.ml
@@ -1,6 +1,13 @@
 type extract_concrete_typedecl =
   Env.t -> Types.type_expr -> Path.t * Path.t * Types.type_declaration
 
+let configured_jsx_module : string option ref = ref None
+
+let with_configured_jsx_module s =
+  match !configured_jsx_module with
+  | None -> s
+  | Some module_name -> module_name ^ "." ^ s
+
 module Parser : sig
   type comment
 
@@ -276,6 +283,52 @@ let print_extra_type_clash_help ~extract_concrete_typedecl ~env loc ppf
       (match suggested_rewrite with
       | Some rewrite -> rewrite
       | None -> "")
+  | ( _,
+      Some
+        ( {desc = Tconstr (p, type_params, _)},
+          {desc = Tconstr (Pdot (Pident {name = "Jsx"}, "element", _), _, _)} )
+    ) -> (
+    (* Looking for a JSX element but got something else *)
+    let is_jsx_element ty =
+      match Ctype.expand_head env ty with
+      | {desc = Tconstr (Pdot (Pident {name = "Jsx"}, "element", _), _, _)} ->
+        true
+      | _ -> false
+    in
+
+    let print_jsx_msg ?(extra = "") name target_fn =
+      fprintf ppf
+        "@,\
+         @,\
+         In JSX, all content must be JSX elements. You can convert %s to a JSX \
+         element with @{<info>%s@}%s.@,"
+        name target_fn extra
+    in
+
+    match type_params with
+    | _ when Path.same p Predef.path_int ->
+      print_jsx_msg "int" (with_configured_jsx_module "int")
+    | _ when Path.same p Predef.path_string ->
+      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")
+    | [tp] when Path.same p Predef.path_array && is_jsx_element tp ->
+      print_jsx_msg
+        ~extra:
+          (" (for example by using a pipe: ->"
+          ^ with_configured_jsx_module "array"
+          ^ ".")
+        "array"
+        (with_configured_jsx_module "array")
+    | [_] when Path.same p Predef.path_array ->
+      fprintf ppf
+        "@,\
+         @,\
+         You need to convert each item in this array to a JSX element first, \
+         then use @{<info>%s@} to convert the array of JSX elements into a \
+         single JSX element.@,"
+        (with_configured_jsx_module "array")
+    | _ -> ())
   | _ -> ()
 
 let type_clash_context_from_function sexp sfunct =
diff --git a/tests/build_tests/super_errors/expected/jsx_type_mismatch_array_element.res.expected b/tests/build_tests/super_errors/expected/jsx_type_mismatch_array_element.res.expected
@@ -0,0 +1,13 @@
+
+  [1;31mWe've found a bug for you![0m
+  [36m/.../fixtures/jsx_type_mismatch_array_element.res[0m:[2m19:13-30[0m
+
+  17 [2m│[0m }
+  18 [2m│[0m 
+  [1;31m19[0m [2m│[0m let x = <> {[1;31m[React.string("")][0m} </>
+  20 [2m│[0m 
+
+  This has type: [1;31marray<'a>[0m
+  But it's expected to have type: [1;33mReact.element[0m [2m(defined as[0m [1;33mJsx.element[0m[2m)[0m
+  
+  You need to convert each item in this array to a JSX element first, then use [1;33mReact.array[0m to convert the array of JSX elements into a single JSX element.
diff --git a/tests/build_tests/super_errors/expected/jsx_type_mismatch_array_raw.res.expected b/tests/build_tests/super_errors/expected/jsx_type_mismatch_array_raw.res.expected
@@ -0,0 +1,13 @@
+
+  [1;31mWe've found a bug for you![0m
+  [36m/.../fixtures/jsx_type_mismatch_array_raw.res[0m:[2m17:13-16[0m
+
+  15 [2m│[0m }
+  16 [2m│[0m 
+  [1;31m17[0m [2m│[0m let x = <> {[1;31m[""][0m} </>
+  18 [2m│[0m 
+
+  This has type: [1;31marray<'a>[0m
+  But it's expected to have type: [1;33mReact.element[0m [2m(defined as[0m [1;33mJsx.element[0m[2m)[0m
+  
+  You need to convert each item in this array to a JSX element first, then use [1;33mReact.array[0m to convert the array of JSX elements into a single JSX element.
diff --git a/tests/build_tests/super_errors/expected/jsx_type_mismatch_float.res.expected b/tests/build_tests/super_errors/expected/jsx_type_mismatch_float.res.expected
@@ -0,0 +1,13 @@
+
+  [1;31mWe've found a bug for you![0m
+  [36m/.../fixtures/jsx_type_mismatch_float.res[0m:[2m17:13-14[0m
+
+  15 [2m│[0m }
+  16 [2m│[0m 
+  [1;31m17[0m [2m│[0m let x = <> {[1;31m1.[0m} </>
+  18 [2m│[0m 
+
+  This has type: [1;31mfloat[0m
+  But it's expected to have type: [1;33mReact.element[0m [2m(defined as[0m [1;33mJsx.element[0m[2m)[0m
+  
+  In JSX, all content must be JSX elements. You can convert float to a JSX element with [1;33mReact.float[0m.
diff --git a/tests/build_tests/super_errors/expected/jsx_type_mismatch_int.res.expected b/tests/build_tests/super_errors/expected/jsx_type_mismatch_int.res.expected
@@ -0,0 +1,13 @@
+
+  [1;31mWe've found a bug for you![0m
+  [36m/.../fixtures/jsx_type_mismatch_int.res[0m:[2m17:13[0m
+
+  15 [2m│[0m }
+  16 [2m│[0m 
+  [1;31m17[0m [2m│[0m let x = <> {[1;31m1[0m} </>
+  18 [2m│[0m 
+
+  This has type: [1;31mint[0m
+  But it's expected to have type: [1;33mReact.element[0m [2m(defined as[0m [1;33mJsx.element[0m[2m)[0m
+  
+  In JSX, all content must be JSX elements. You can convert int to a JSX element with [1;33mReact.int[0m.
diff --git a/tests/build_tests/super_errors/expected/jsx_type_mismatch_string.res.expected b/tests/build_tests/super_errors/expected/jsx_type_mismatch_string.res.expected
@@ -0,0 +1,13 @@
+
+  [1;31mWe've found a bug for you![0m
+  [36m/.../fixtures/jsx_type_mismatch_string.res[0m:[2m17:13-14[0m
+
+  15 [2m│[0m }
+  16 [2m│[0m 
+  [1;31m17[0m [2m│[0m let x = <> {[1;31m""[0m} </>
+  18 [2m│[0m 
+
+  This has type: [1;31mstring[0m
+  But it's expected to have type: [1;33mReact.element[0m [2m(defined as[0m [1;33mJsx.element[0m[2m)[0m
+  
+  In JSX, all content must be JSX elements. You can convert string to a JSX element with [1;33mReact.string[0m.
diff --git a/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_array_element.res b/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_array_element.res
@@ -0,0 +1,19 @@
+@@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"
+
+  external string: string => element = "%identity"
+}
+
+let x = <> {[React.string("")]} </>
diff --git a/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_array_raw.res b/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_array_raw.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 = <> {[""]} </>
diff --git a/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_float.res b/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_float.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 = <> {1.} </>
diff --git a/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_int.res b/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_int.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 = <> {1} </>
diff --git a/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_string.res b/tests/build_tests/super_errors/fixtures/jsx_type_mismatch_string.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 = <> {""} </>

-Original file line number
+Diff line change
@@ @@ -0,0 +1,13 @@ @@
++
 +  [1;31mWe've found a bug for you![0m
 +  [36m/.../fixtures/jsx_type_mismatch_array_element.res[0m:[2m19:13-30[0m
++
 +  17 [2m│[0m }
 +  18 [2m│[0m
 +  [1;31m19[0m [2m│[0m let x = <> {[1;31m[React.string("")][0m} </>
 +  20 [2m│[0m
++
 +  This has type: [1;31marray<'a>[0m
 +  But it's expected to have type: [1;33mReact.element[0m [2m(defined as[0m [1;33mJsx.element[0m[2m)[0m
++
 +  You need to convert each item in this array to a JSX element first, then use [1;33mReact.array[0m to convert the array of JSX elements into a single JSX element.