Specialize the message on JSX tags looking for the JSX factory namespace (#58870)

Author: DanielRosenwasser

src/compiler/checker.ts

@@ -30132,7 +30132,7 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
         if (!getJsxNamespaceContainerForImplicitImport(node)) {
             // The reactNamespace/jsxFactory's root symbol should be marked as 'used' so we don't incorrectly elide its import.
             // And if there is no reactNamespace/jsxFactory's symbol in scope when targeting React emit, we should issue an error.
-            const jsxFactoryRefErr = diagnostics && compilerOptions.jsx === JsxEmit.React ? Diagnostics.Cannot_find_name_0 : undefined;
+            const jsxFactoryRefErr = diagnostics && compilerOptions.jsx === JsxEmit.React ? Diagnostics.This_JSX_tag_requires_0_to_be_in_scope_but_it_could_not_be_found : undefined;
             const jsxFactoryNamespace = getJsxNamespace(node);
             const jsxFactoryLocation = isJsxOpeningLikeElement(node) ? node.tagName : node;
 
@@ -33438,7 +33438,7 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
         const isClassic = getEmitModuleResolutionKind(compilerOptions) === ModuleResolutionKind.Classic;
         const errorMessage = isClassic
             ? Diagnostics.Cannot_find_module_0_Did_you_mean_to_set_the_moduleResolution_option_to_nodenext_or_to_add_aliases_to_the_paths_option
-            : Diagnostics.Cannot_find_module_0_or_its_corresponding_type_declarations;
+            : Diagnostics.This_JSX_tag_requires_the_module_path_0_to_exist_but_none_could_be_found_Make_sure_you_have_types_for_the_appropriate_package_installed;
         const specifier = getJSXRuntimeImportSpecifier(file, runtimeImportSpecifier);
         const mod = resolveExternalModule(specifier || location!, runtimeImportSpecifier, errorMessage, location);
         const result = mod && mod !== unknownSymbol ? getMergedSymbol(resolveSymbol(mod)) : undefined;

src/compiler/diagnosticMessages.json

@@ -3948,6 +3948,15 @@
         "category": "Error",
         "code": 2873
     },
+    "This JSX tag requires '{0}' to be in scope, but it could not be found.": {
+        "category": "Error",
+        "code": 2874
+    },
+    "This JSX tag requires the module path '{0}' to exist, but none could be found. Make sure you have types for the appropriate package installed.": {
+        "category": "Error",
+        "code": 2875
+    },
+
     "Import declaration '{0}' is using private name '{1}'.": {
         "category": "Error",
         "code": 4000

src/services/codefixes/fixCannotFindModule.ts

@@ -6,6 +6,7 @@ import {
 import {
     Debug,
     Diagnostics,
+    getJSXImplicitImportBase,
     getTokenAtPosition,
     getTypesPackageName,
     InstallPackageAction,
@@ -22,17 +23,23 @@ const fixName = "fixCannotFindModule";
 const fixIdInstallTypesPackage = "installTypesPackage";
 
 const errorCodeCannotFindModule = Diagnostics.Cannot_find_module_0_or_its_corresponding_type_declarations.code;
+const errorCannotFindImplicitJsxImport = Diagnostics.This_JSX_tag_requires_the_module_path_0_to_exist_but_none_could_be_found_Make_sure_you_have_types_for_the_appropriate_package_installed.code;
 const errorCodes = [
     errorCodeCannotFindModule,
     Diagnostics.Could_not_find_a_declaration_file_for_module_0_1_implicitly_has_an_any_type.code,
+    errorCannotFindImplicitJsxImport,
 ];
 registerCodeFix({
     errorCodes,
     getCodeActions: function getCodeActionsToFixNotFoundModule(context) {
-        const { host, sourceFile, span: { start } } = context;
-        const packageName = tryGetImportedPackageName(sourceFile, start);
+        const { host, sourceFile, span: { start }, errorCode } = context;
+
+        const packageName = errorCode === errorCannotFindImplicitJsxImport ?
+            getJSXImplicitImportBase(context.program.getCompilerOptions(), sourceFile) :
+            tryGetImportedPackageName(sourceFile, start);
         if (packageName === undefined) return undefined;
-        const typesPackageName = getTypesPackageNameToInstall(packageName, host, context.errorCode);
+
+        const typesPackageName = getTypesPackageNameToInstall(packageName, host, errorCode);
         return typesPackageName === undefined
             ? []
             : [createCodeFixAction(fixName, /*changes*/ [], [Diagnostics.Install_0, typesPackageName], fixIdInstallTypesPackage, Diagnostics.Install_all_missing_types_packages, getInstallCommand(sourceFile.fileName, typesPackageName))];

src/services/codefixes/importFixes.ts

@@ -180,6 +180,7 @@ const errorCodes: readonly number[] = [
     Diagnostics.Cannot_find_name_0_Do_you_need_to_install_type_definitions_for_node_Try_npm_i_save_dev_types_Slashnode.code,
     Diagnostics.Cannot_find_name_0_Do_you_need_to_install_type_definitions_for_node_Try_npm_i_save_dev_types_Slashnode_and_then_add_node_to_the_types_field_in_your_tsconfig.code,
     Diagnostics.Cannot_find_namespace_0_Did_you_mean_1.code,
+    Diagnostics.This_JSX_tag_requires_0_to_be_in_scope_but_it_could_not_be_found.code,
 ];
 
 registerCodeFix({

tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react,module=commonjs,moduledetection=auto).errors.txt

@@ -1,4 +1,4 @@
-commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name 'React'.
+commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
 
 
 ==== commentsOnJSXExpressionsArePreserved.tsx (1 errors) ====
@@ -8,7 +8,7 @@ commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name '
         render() {
             return <div>
                     ~~~
-!!! error TS2304: Cannot find name 'React'.
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
                 {/* missing */}
                 {null/* preserved */}
                 {

tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react,module=commonjs,moduledetection=force).errors.txt

@@ -1,4 +1,4 @@
-commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name 'React'.
+commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
 
 
 ==== commentsOnJSXExpressionsArePreserved.tsx (1 errors) ====
@@ -8,7 +8,7 @@ commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name '
         render() {
             return <div>
                     ~~~
-!!! error TS2304: Cannot find name 'React'.
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
                 {/* missing */}
                 {null/* preserved */}
                 {

tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react,module=commonjs,moduledetection=legacy).errors.txt

@@ -1,4 +1,4 @@
-commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name 'React'.
+commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
 
 
 ==== commentsOnJSXExpressionsArePreserved.tsx (1 errors) ====
@@ -8,7 +8,7 @@ commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name '
         render() {
             return <div>
                     ~~~
-!!! error TS2304: Cannot find name 'React'.
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
                 {/* missing */}
                 {null/* preserved */}
                 {

tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react,module=system,moduledetection=auto).errors.txt

@@ -1,4 +1,4 @@
-commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name 'React'.
+commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
 
 
 ==== commentsOnJSXExpressionsArePreserved.tsx (1 errors) ====
@@ -8,7 +8,7 @@ commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name '
         render() {
             return <div>
                     ~~~
-!!! error TS2304: Cannot find name 'React'.
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
                 {/* missing */}
                 {null/* preserved */}
                 {

tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react,module=system,moduledetection=force).errors.txt

@@ -1,4 +1,4 @@
-commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name 'React'.
+commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
 
 
 ==== commentsOnJSXExpressionsArePreserved.tsx (1 errors) ====
@@ -8,7 +8,7 @@ commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name '
         render() {
             return <div>
                     ~~~
-!!! error TS2304: Cannot find name 'React'.
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
                 {/* missing */}
                 {null/* preserved */}
                 {

tests/baselines/reference/commentsOnJSXExpressionsArePreserved(jsx=react,module=system,moduledetection=legacy).errors.txt

@@ -1,4 +1,4 @@
-commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name 'React'.
+commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
 
 
 ==== commentsOnJSXExpressionsArePreserved.tsx (1 errors) ====
@@ -8,7 +8,7 @@ commentsOnJSXExpressionsArePreserved.tsx(5,17): error TS2304: Cannot find name '
         render() {
             return <div>
                     ~~~
-!!! error TS2304: Cannot find name 'React'.
+!!! error TS2874: This JSX tag requires 'React' to be in scope, but it could not be found.
                 {/* missing */}
                 {null/* preserved */}
                 {