Better error for a JSX component module without make

changes/jsx-component-without-make.polish.md

@@ -0,0 +1 @@
+- Explain that a JSX tag needs a component module that defines `make`, when the module it names doesn't. https://github.com/rescript-lang/rescript/pull/8885

compiler/ml/typecore.ml

@@ -98,6 +98,7 @@ type error =
   | Type_params_not_supported of Longident.t
   | Field_access_on_dict_type
   | Jsx_not_enabled
+  | Jsx_component_without_make of Longident.t
   | Jsx_unboxed_props of type_expr
   | Tagged_template_non_tag of type_expr
   | Record_rest of Typecore_record_rest.error
@@ -2530,12 +2531,20 @@ and type_expect_ ?deprecated_context ~context ?(recarg = Rejected) env sexp
     {exp with exp_attributes = sexp.pexp_attributes @ exp.exp_attributes}
   | Pexp_ident lid ->
     let path, desc =
-      Typetexp.find_value
-        ?deprecated_context:
-          (match deprecated_context with
-          | None -> Some Reference
-          | v -> v)
-        env lid.loc lid.txt
+      try
+        Typetexp.find_value
+          ?deprecated_context:
+            (match deprecated_context with
+            | None -> Some Reference
+            | v -> v)
+          env lid.loc lid.txt
+      with
+      | Typetexp.Error (_, _, Unbound_value (Ldot (module_lid, "make")))
+      when context = Some JsxComponent
+      ->
+        (* [<Button />] refers to [Button.make]. The module exists (otherwise
+           the lookup reports it as unbound), but it defines no component. *)
+        raise (Error (lid.loc, env, Jsx_component_without_make module_lid))
     in
     let is_recarg =
       match (repr desc.val_type).desc with
@@ -5570,6 +5579,19 @@ let report_error env loc ppf error =
     fprintf ppf
       "Cannot compile JSX expression because JSX support is not enabled. Add \
        \"jsx\" settings to rescript.json to enable JSX support."
+  | Jsx_component_without_make module_lid ->
+    fprintf ppf
+      "@[<v>The module @{<info>%a@} can't be used as a JSX component, because \
+       it doesn't define @{<info>make@}.@,\
+       @,\
+       A component module defines its component as @{<info>make@}, for \
+       example:@,\
+       @,\
+      \  @{<info>@react.component@}@,\
+      \  let make = (~label) => ...@]"
+      longident module_lid;
+    ignore
+      (Typetexp.spellcheck_value ppf env (Longident.Ldot (module_lid, "make")))
   | Jsx_unboxed_props typ ->
     fprintf ppf
       "@[<v>The props of this JSX element have type %a, which is an \

compiler/ml/typecore.mli

@@ -114,6 +114,7 @@ type error =
   | Type_params_not_supported of Longident.t
   | Field_access_on_dict_type
   | Jsx_not_enabled
+  | Jsx_component_without_make of Longident.t
   | Jsx_unboxed_props of type_expr
   | Tagged_template_non_tag of type_expr
   | Record_rest of Typecore_record_rest.error

compiler/ml/typetexp.ml

@@ -785,6 +785,8 @@ let super_spellcheck ppf fold env lid =
   | Longident.Lident s -> did_you_mean ppf (fun _ -> choices None s)
   | Longident.Ldot (r, s) -> did_you_mean ppf (fun _ -> choices (Some r) s)
 
+let spellcheck_value ppf env lid = super_spellcheck ppf Env.fold_values env lid
+
 let spellcheck ppf fold env lid =
   let choices ~path name =
     let env = fold (fun x xs -> x :: xs) path env [] in
@@ -890,7 +892,7 @@ let report_error env ppf = function
     | other_ident ->
       Format.fprintf ppf "The value %a can't be found" Printtyp.longident
         other_ident);
-    let did_spellcheck = super_spellcheck ppf Env.fold_values env lid in
+    let did_spellcheck = spellcheck_value ppf env lid in
     (* For cases such as when the user refers to something that's a value with 
       a lowercase identifier in JS but a module in ReScript.
 

compiler/ml/typetexp.mli

@@ -64,6 +64,10 @@ exception Error of Location.t * Env.t * error
 
 val report_error : Env.t -> Format.formatter -> error -> unit
 
+val spellcheck_value : Format.formatter -> Env.t -> Longident.t -> bool
+(** Print a hint naming the values in scope whose names are close to the given
+    one. Returns whether it printed one. *)
+
 (* Support for first-class modules. *)
 val transl_modtype_longident :
   (* from Typemod *)

tests/ERROR_VARIANTS.md

@@ -252,6 +252,7 @@ Source: `type error` in [typecore.ml](../compiler/ml/typecore.ml).
 | `Type_params_not_supported` | ✓ | `variant_spread_pattern_type_params.res` | Pattern-level variant spread (`| ...a as v`) where `a` has type params; typedecl path covered by `variant_spread_type_parameters.res`. |
 | `Field_access_on_dict_type` | ✓ | `field_access_on_dict_type.res` | |
 | `Jsx_not_enabled` | ☐ (needs harness flag) | — | typecore.ml, the `Pexp_jsx_element` cases of `iter_expression` and `type_expect_`. Fires when JSX is used without `-bs-jsx N`. The `super_errors` runner hard-codes `-bs-jsx 4` in `bscFlags`; adding a per-fixture opt-out (e.g. a `.opts` sidecar) would expose this. Until then, it's reachable in real code but blocked at the harness level. |
+| `Jsx_component_without_make` | ✓ | `jsx_component_without_make.res`, `jsx_component_without_make_typo.res` | A JSX tag naming a module that has no `make` value; the typo fixture pins the spellcheck hint. |
 | `Jsx_unboxed_props` | ✓ | `jsx_unboxed_props.res`, `jsx_unboxed_props_spread.res` | A JSX element whose props have an `@unboxed` record type, given as attributes or as a spread. |
 | `Tagged_template_non_tag` | ✓ | `tagged_template_non_tag.res` | Backtick tagged-template syntax used on a value whose type is not `taggedTemplate<'param, 'output>`. |
 

tests/build_tests/super_errors/expected/jsx_component_without_make.res.expected

@@ -0,0 +1,15 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_component_without_make.res:24:10-18
+
+  22 │ }
+  23 │ 
+  24 │ let x = <Ui.Button />
+  25 │ 
+
+  The module Ui.Button can't be used as a JSX component, because it doesn't define make.
+
+  A component module defines its component as make, for example:
+
+    @react.component
+    let make = (~label) => ...

tests/build_tests/super_errors/expected/jsx_component_without_make_typo.res.expected

@@ -0,0 +1,17 @@
+
+  We've found a bug for you!
+  /.../fixtures/jsx_component_without_make_typo.res:25:10-15
+
+  23 │ }
+  24 │ 
+  25 │ let x = <Button label="a" />
+  26 │ 
+
+  The module Button can't be used as a JSX component, because it doesn't define make.
+
+  A component module defines its component as make, for example:
+
+    @react.component
+    let make = (~label) => ...
+
+  Hint: Did you mean mak?

tests/build_tests/super_errors/fixtures/jsx_component_without_make.res

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

tests/build_tests/super_errors/fixtures/jsx_component_without_make_typo.res

@@ -0,0 +1,25 @@
+@@config({
+  flags: ["-bs-jsx", "4"],
+})
+
+module React = {
+  type element = Jsx.element
+  type componentLike<'props, 'return> = '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"
+
+  type fragmentProps = {children?: element}
+  @module("react/jsx-runtime") external jsxFragment: component<fragmentProps> = "Fragment"
+
+  external string: string => element = "%identity"
+}
+
+module Button = {
+  @react.component
+  let mak = (~label) => React.string(label)
+}
+
+let x = <Button label="a" />