microsoft/TypeScript
1
0
Fork 0
mirror of https://github.com/microsoft/TypeScript.git synced 2026-02-04 03:09:39 -06:00
Code Issues Packages Projects Releases 212 Wiki Activity

Fix error message to show 'Fragment' instead of 'React' for react-jsx modes

Browse Source 
Co-authored-by: jakebailey <5341706+jakebailey@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot] 2025-11-10 16:49:56 +00:00
parent 7fcfd01ec3
commit 983250fefc
9 changed files with 99 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/compiler/checker.ts
View File

@ -37441,11 +37441,15 @@ export function createTypeChecker(host: TypeCheckerHost): TypeChecker {
if (!shouldResolveFactoryReference) return sourceFileLinks.jsxFragmentType = anyType;
const shouldModuleRefErr = compilerOptions.jsx !== JsxEmit.Preserve && compilerOptions.jsx !== JsxEmit.ReactNative;
// When using react-jsx/react-jsxdev, the fragment comes from the jsx-runtime module as "Fragment" export
// Use "Fragment" in error message instead of the default "React" namespace
const isModernJsx = compilerOptions.jsx === JsxEmit.ReactJSX || compilerOptions.jsx === JsxEmit.ReactJSXDev;
const fragmentFactoryNameForError = isModernJsx ? ReactNames.Fragment : jsxFragmentFactoryName;
const jsxFactoryRefErr = diagnostics ? Diagnostics.Using_JSX_fragments_requires_fragment_factory_0_to_be_in_scope_but_it_could_not_be_found : undefined;
const jsxFactorySymbol = getJsxNamespaceContainerForImplicitImport(node) ??
resolveName(
node,
jsxFragmentFactoryName,
fragmentFactoryNameForError,
shouldModuleRefErr ? SymbolFlags.Value : SymbolFlags.Value & ~SymbolFlags.Enum,
/*nameNotFoundMessage*/ jsxFactoryRefErr,
/*isUse*/ true,

4
tests/baselines/reference/jsxFragmentFactoryReference(jsx=react-jsx).errors.txt
View File

@ -1,5 +1,5 @@
jsxFragmentFactoryReference.tsx(3,9): error TS2875: This JSX tag requires the module path 'react/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
jsxFragmentFactoryReference.tsx(3,9): error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
jsxFragmentFactoryReference.tsx(3,9): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== jsxFragmentFactoryReference.tsx (2 errors) ====
@ -9,7 +9,7 @@ jsxFragmentFactoryReference.tsx(3,9): error TS2879: Using JSX fragments requires
~~
!!! error TS2875: This JSX tag requires the module path 'react/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
)
}

4
tests/baselines/reference/jsxFragmentFactoryReference(jsx=react-jsxdev).errors.txt
View File

@ -1,5 +1,5 @@
jsxFragmentFactoryReference.tsx(3,9): error TS2875: This JSX tag requires the module path 'react/jsx-dev-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
jsxFragmentFactoryReference.tsx(3,9): error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
jsxFragmentFactoryReference.tsx(3,9): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== jsxFragmentFactoryReference.tsx (2 errors) ====
@ -9,7 +9,7 @@ jsxFragmentFactoryReference.tsx(3,9): error TS2879: Using JSX fragments requires
~~
!!! error TS2875: This JSX tag requires the module path 'react/jsx-dev-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
)
}

4
tests/baselines/reference/jsxJsxsCjsTransformCustomImport(jsx=react-jsx).errors.txt
View File

@ -1,5 +1,5 @@
jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2875: This JSX tag requires the module path 'preact/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== jsxJsxsCjsTransformCustomImport.tsx (2 errors) ====
@ -8,7 +8,7 @@ jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2879: Using JSX fragments req
~~
!!! error TS2875: This JSX tag requires the module path 'preact/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
<p></p>
text
<div className="foo"></div>

4
tests/baselines/reference/jsxJsxsCjsTransformCustomImport(jsx=react-jsxdev).errors.txt
View File

@ -1,5 +1,5 @@
jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2875: This JSX tag requires the module path 'preact/jsx-dev-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== jsxJsxsCjsTransformCustomImport.tsx (2 errors) ====
@ -8,7 +8,7 @@ jsxJsxsCjsTransformCustomImport.tsx(2,11): error TS2879: Using JSX fragments req
~~
!!! error TS2875: This JSX tag requires the module path 'preact/jsx-dev-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
<p></p>
text
<div className="foo"></div>

4
tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsx).errors.txt
View File

@ -1,5 +1,5 @@
preact.tsx(3,11): error TS2875: This JSX tag requires the module path 'preact/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
preact.tsx(3,11): error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
preact.tsx(3,11): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== react.tsx (0 errors) ====
@ -20,7 +20,7 @@ preact.tsx(3,11): error TS2879: Using JSX fragments requires fragment factory 'R
~~
!!! error TS2875: This JSX tag requires the module path 'preact/jsx-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
<p></p>
text
<div className="foo"></div>

4
tests/baselines/reference/jsxJsxsCjsTransformCustomImportPragma(jsx=react-jsxdev).errors.txt
View File

@ -1,5 +1,5 @@
preact.tsx(3,11): error TS2875: This JSX tag requires the module path 'preact/jsx-dev-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
preact.tsx(3,11): error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
preact.tsx(3,11): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== react.tsx (0 errors) ====
@ -20,7 +20,7 @@ preact.tsx(3,11): error TS2879: Using JSX fragments requires fragment factory 'R
~~
!!! error TS2875: This JSX tag requires the module path 'preact/jsx-dev-runtime' to exist, but none could be found. Make sure you have types for the appropriate package installed.
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'React' to be in scope, but it could not be found.
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
<p></p>
text
<div className="foo"></div>

41
tests/baselines/reference/jsxRuntimePragma(jsx=react-jsx).errors.txt Normal file
View File

@ -0,0 +1,41 @@
four.tsx(6,21): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
one.tsx(5,21): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== one.tsx (1 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime classic */
import * as React from "react";
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
export const selfClosing = <img src="./image.png" />;
==== two.tsx (0 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime automatic */
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
export const selfClosing = <img src="./image.png" />;
==== three.tsx (0 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime classic */
/* @jsxRuntime automatic */
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
export const selfClosing = <img src="./image.png" />;
==== four.tsx (1 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime automatic */
/* @jsxRuntime classic */
import * as React from "react";
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
export const selfClosing = <img src="./image.png" />;
==== index.ts (0 errors) ====
export * as one from "./one.js";
export * as two from "./two.js";
export * as three from "./three.js";
export * as four from "./four.js";

41
tests/baselines/reference/jsxRuntimePragma(jsx=react-jsxdev).errors.txt Normal file
View File

@ -0,0 +1,41 @@
four.tsx(6,21): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
one.tsx(5,21): error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
==== one.tsx (1 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime classic */
import * as React from "react";
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
export const selfClosing = <img src="./image.png" />;
==== two.tsx (0 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime automatic */
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
export const selfClosing = <img src="./image.png" />;
==== three.tsx (0 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime classic */
/* @jsxRuntime automatic */
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
export const selfClosing = <img src="./image.png" />;
==== four.tsx (1 errors) ====
/// <reference path="/.lib/react16.d.ts" />
/* @jsxRuntime automatic */
/* @jsxRuntime classic */
import * as React from "react";
export const HelloWorld = () => <h1>Hello world</h1>;
export const frag = <><div></div></>;
~~
!!! error TS2879: Using JSX fragments requires fragment factory 'Fragment' to be in scope, but it could not be found.
export const selfClosing = <img src="./image.png" />;
==== index.ts (0 errors) ====
export * as one from "./one.js";
export * as two from "./two.js";
export * as three from "./three.js";
export * as four from "./four.js";