diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts index 91cafa70cf6eb..899e4a17a9bf3 100644 --- a/src/compiler/checker.ts +++ b/src/compiler/checker.ts @@ -25412,26 +25412,29 @@ namespace ts { } checkJsxPreconditions(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 jsxFactoryNamespace = getJsxNamespace(node); - const jsxFactoryLocation = isNodeOpeningLikeElement ? (node).tagName : node; - - // allow null as jsxFragmentFactory - let jsxFactorySym: Symbol | undefined; - if (!(isJsxOpeningFragment(node) && jsxFactoryNamespace === "null")) { - jsxFactorySym = resolveName(jsxFactoryLocation, jsxFactoryNamespace, SymbolFlags.Value, jsxFactoryRefErr, jsxFactoryNamespace, /*isUse*/ true); - } - - if (jsxFactorySym) { - // Mark local symbol as referenced here because it might not have been marked - // if jsx emit was not jsxFactory as there wont be error being emitted - jsxFactorySym.isReferenced = SymbolFlags.All; - - // If react/jsxFactory symbol is alias, mark it as refereced - if (jsxFactorySym.flags & SymbolFlags.Alias && !getTypeOnlyAliasDeclaration(jsxFactorySym)) { - markAliasSymbolAsReferenced(jsxFactorySym); + + 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 jsxFactoryNamespace = getJsxNamespace(node); + const jsxFactoryLocation = isNodeOpeningLikeElement ? (node).tagName : node; + + // allow null as jsxFragmentFactory + let jsxFactorySym: Symbol | undefined; + if (!(isJsxOpeningFragment(node) && jsxFactoryNamespace === "null")) { + jsxFactorySym = resolveName(jsxFactoryLocation, jsxFactoryNamespace, SymbolFlags.Value, jsxFactoryRefErr, jsxFactoryNamespace, /*isUse*/ true); + } + + if (jsxFactorySym) { + // Mark local symbol as referenced here because it might not have been marked + // if jsx emit was not jsxFactory as there wont be error being emitted + jsxFactorySym.isReferenced = SymbolFlags.All; + + // If react/jsxFactory symbol is alias, mark it as refereced + if (jsxFactorySym.flags & SymbolFlags.Alias && !getTypeOnlyAliasDeclaration(jsxFactorySym)) { + markAliasSymbolAsReferenced(jsxFactorySym); + } } } diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js index 3d2aeb4218c7f..8140be9eda124 100644 --- a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js +++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsx).js @@ -21,8 +21,6 @@ const element = ( "use strict"; exports.__esModule = true; var jsx_runtime_1 = require("react/jsx-runtime"); -/// -var React = require("react"); function Wrapper(props) { return jsx_runtime_1.jsx("div", { children: props.children }, void 0); } diff --git a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js index 5561b73e45425..819ccebea6d21 100644 --- a/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js +++ b/tests/baselines/reference/jsxEmptyExpressionNotCountedAsChild(jsx=react-jsxdev).js @@ -22,8 +22,6 @@ const element = ( exports.__esModule = true; var jsx_dev_runtime_1 = require("react/jsx-dev-runtime"); var _jsxFileName = "tests/cases/compiler/jsxEmptyExpressionNotCountedAsChild.tsx"; -/// -var React = require("react"); function Wrapper(props) { return jsx_dev_runtime_1.jsxDEV("div", { children: props.children }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 11 }, this); } diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt deleted file mode 100644 index f62b476f13c7c..0000000000000 --- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt +++ /dev/null @@ -1,69 +0,0 @@ -/index.tsx(2,28): error TS2708: Cannot use namespace 'React' as a value. - - -==== /node_modules/react/index.d.ts (0 errors) ==== - export = React; - export as namespace React; - - declare namespace React { } - - declare global { - namespace JSX { - interface Element { } - interface ElementClass { } - interface ElementAttributesProperty { } - interface ElementChildrenAttribute { } - type LibraryManagedAttributes = {} - interface IntrinsicAttributes { } - interface IntrinsicClassAttributes { } - interface IntrinsicElements { - div: {} - } - } - } -==== /node_modules/@emotion/react/jsx-runtime/index.d.ts (0 errors) ==== - export { EmotionJSX as JSX } from './jsx-namespace' - -==== /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts (0 errors) ==== - import 'react' - - type WithConditionalCSSProp

= 'className' extends keyof P - ? (P extends { className?: string } ? P & { css?: string } : P) - : P - - type ReactJSXElement = JSX.Element - type ReactJSXElementClass = JSX.ElementClass - type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty - type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute - type ReactJSXLibraryManagedAttributes = JSX.LibraryManagedAttributes - type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes - type ReactJSXIntrinsicClassAttributes = JSX.IntrinsicClassAttributes - type ReactJSXIntrinsicElements = JSX.IntrinsicElements - - export namespace EmotionJSX { - interface Element extends ReactJSXElement { } - interface ElementClass extends ReactJSXElementClass { } - interface ElementAttributesProperty - extends ReactJSXElementAttributesProperty { } - interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute { } - - type LibraryManagedAttributes = WithConditionalCSSProp

& - ReactJSXLibraryManagedAttributes - - interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { } - interface IntrinsicClassAttributes - extends ReactJSXIntrinsicClassAttributes { } - - type IntrinsicElements = { - [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & { - css?: string - } - } - } - -==== /index.tsx (1 errors) ==== - /* @jsxImportSource @emotion/react */ - export const Comp = () =>

; - ~~~ -!!! error TS2708: Cannot use namespace 'React' as a value. - \ No newline at end of file diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types index c7e2aeb868276..cd130b8538742 100644 --- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types +++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types @@ -3,7 +3,7 @@ export = React; >React : any export as namespace React; ->React : any +>React : error declare namespace React { }