From f46544d307c7a6c534b4706ea309c2bbbeb027d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 10 Nov 2020 14:51:41 +0100
Subject: [PATCH 1/3] Add actual baselines for a problem with global namespace
 being preferred over config & pragma implicit ones

---
 ...ceFromConfigPickedOverGlobalOne.errors.txt |  70 +++++++
 ...XNamespaceFromConfigPickedOverGlobalOne.js |  73 +++++++
 ...spaceFromConfigPickedOverGlobalOne.symbols | 184 +++++++++++++++++
 ...mespaceFromConfigPickedOverGlobalOne.types | 112 +++++++++++
 ...ceFromPragmaPickedOverGlobalOne.errors.txt |  74 +++++++
 ...XNamespaceFromPragmaPickedOverGlobalOne.js |  75 +++++++
 ...spaceFromPragmaPickedOverGlobalOne.symbols | 185 ++++++++++++++++++
 ...mespaceFromPragmaPickedOverGlobalOne.types | 113 +++++++++++
 ...NamespaceFromConfigPickedOverGlobalOne.tsx |  65 ++++++
 ...NamespaceFromPragmaPickedOverGlobalOne.tsx |  65 ++++++
 10 files changed, 1016 insertions(+)
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.js
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.js
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols
 create mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types
 create mode 100644 tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.tsx
 create mode 100644 tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.tsx

diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt
new file mode 100644
index 0000000000000..9cbe47a9ee62c
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt
@@ -0,0 +1,70 @@
+/index.tsx(1,32): error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
+  Property 'css' does not exist on type '{}'.
+
+
+==== /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<C, P> = {}
+        interface IntrinsicAttributes {}
+        interface IntrinsicClassAttributes<T> {}
+        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<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
+    type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+    type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+    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<C, P> = WithConditionalCSSProp<P> &
+        ReactJSXLibraryManagedAttributes<C, P>
+    
+      interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+      interface IntrinsicClassAttributes<T>
+        extends ReactJSXIntrinsicClassAttributes<T> {}
+    
+      type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+          css?: string
+        }
+      }
+    }
+    
+==== /index.tsx (1 errors) ====
+    export const Comp = () => <div css="color: hotpink;"></div>;
+                                   ~~~
+!!! error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
+!!! error TS2322:   Property 'css' does not exist on type '{}'.
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.js b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.js
new file mode 100644
index 0000000000000..6ce2c07f82d32
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.js
@@ -0,0 +1,73 @@
+//// [tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.tsx] ////
+
+//// [index.d.ts]
+export = React;
+export as namespace React;
+
+declare namespace React {}
+
+declare global {
+  namespace JSX {
+    interface Element {}
+    interface ElementClass {}
+    interface ElementAttributesProperty {}
+    interface ElementChildrenAttribute {}
+    type LibraryManagedAttributes<C, P> = {}
+    interface IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T> {}
+    interface IntrinsicElements {
+      div: {}
+    }
+  }
+}
+//// [index.d.ts]
+export { EmotionJSX as JSX } from './jsx-namespace'
+
+//// [jsx-namespace.d.ts]
+import 'react'
+
+type WithConditionalCSSProp<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+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<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: string
+    }
+  }
+}
+
+//// [index.tsx]
+export const Comp = () => <div css="color: hotpink;"></div>;
+
+
+//// [index.js]
+"use strict";
+exports.__esModule = true;
+exports.Comp = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+var Comp = function () { return jsx_runtime_1.jsx("div", { css: "color: hotpink;" }, void 0); };
+exports.Comp = Comp;
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols
new file mode 100644
index 0000000000000..8d16fd5c00e91
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols
@@ -0,0 +1,184 @@
+=== /node_modules/react/index.d.ts ===
+export = React;
+>React : Symbol(React, Decl(index.d.ts, 1, 26))
+
+export as namespace React;
+>React : Symbol(React, Decl(index.d.ts, 0, 15))
+
+declare namespace React {}
+>React : Symbol(React, Decl(index.d.ts, 1, 26))
+
+declare global {
+>global : Symbol(global, Decl(index.d.ts, 3, 26))
+
+  namespace JSX {
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+
+    interface Element {}
+>Element : Symbol(Element, Decl(index.d.ts, 6, 17))
+
+    interface ElementClass {}
+>ElementClass : Symbol(ElementClass, Decl(index.d.ts, 7, 24))
+
+    interface ElementAttributesProperty {}
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(index.d.ts, 8, 29))
+
+    interface ElementChildrenAttribute {}
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(index.d.ts, 9, 42))
+
+    type LibraryManagedAttributes<C, P> = {}
+>LibraryManagedAttributes : Symbol(LibraryManagedAttributes, Decl(index.d.ts, 10, 41))
+>C : Symbol(C, Decl(index.d.ts, 11, 34))
+>P : Symbol(P, Decl(index.d.ts, 11, 36))
+
+    interface IntrinsicAttributes {}
+>IntrinsicAttributes : Symbol(IntrinsicAttributes, Decl(index.d.ts, 11, 44))
+
+    interface IntrinsicClassAttributes<T> {}
+>IntrinsicClassAttributes : Symbol(IntrinsicClassAttributes, Decl(index.d.ts, 12, 36))
+>T : Symbol(T, Decl(index.d.ts, 13, 39))
+
+    interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(index.d.ts, 13, 44))
+
+      div: {}
+>div : Symbol(IntrinsicElements.div, Decl(index.d.ts, 14, 33))
+    }
+  }
+}
+=== /node_modules/@emotion/react/jsx-runtime/index.d.ts ===
+export { EmotionJSX as JSX } from './jsx-namespace'
+>EmotionJSX : Symbol(EmotionJSX, Decl(jsx-namespace.d.ts, 13, 54))
+>JSX : Symbol(JSX, Decl(index.d.ts, 0, 8))
+
+=== /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts ===
+import 'react'
+
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+>WithConditionalCSSProp : Symbol(WithConditionalCSSProp, Decl(jsx-namespace.d.ts, 0, 14))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+
+  ? (P extends { className?: string } ? P & { css?: string } : P)
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+>className : Symbol(className, Decl(jsx-namespace.d.ts, 3, 16))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+>css : Symbol(css, Decl(jsx-namespace.d.ts, 3, 45))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+
+  : P
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+
+type ReactJSXElement = JSX.Element
+>ReactJSXElement : Symbol(ReactJSXElement, Decl(jsx-namespace.d.ts, 4, 5))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>Element : Symbol(JSX.Element, Decl(index.d.ts, 6, 17))
+
+type ReactJSXElementClass = JSX.ElementClass
+>ReactJSXElementClass : Symbol(ReactJSXElementClass, Decl(jsx-namespace.d.ts, 6, 34))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>ElementClass : Symbol(JSX.ElementClass, Decl(index.d.ts, 7, 24))
+
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+>ReactJSXElementAttributesProperty : Symbol(ReactJSXElementAttributesProperty, Decl(jsx-namespace.d.ts, 7, 44))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>ElementAttributesProperty : Symbol(JSX.ElementAttributesProperty, Decl(index.d.ts, 8, 29))
+
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+>ReactJSXElementChildrenAttribute : Symbol(ReactJSXElementChildrenAttribute, Decl(jsx-namespace.d.ts, 8, 70))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>ElementChildrenAttribute : Symbol(JSX.ElementChildrenAttribute, Decl(index.d.ts, 9, 42))
+
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+>ReactJSXLibraryManagedAttributes : Symbol(ReactJSXLibraryManagedAttributes, Decl(jsx-namespace.d.ts, 9, 68))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 10, 38))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 10, 40))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>LibraryManagedAttributes : Symbol(JSX.LibraryManagedAttributes, Decl(index.d.ts, 10, 41))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 10, 38))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 10, 40))
+
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+>ReactJSXIntrinsicAttributes : Symbol(ReactJSXIntrinsicAttributes, Decl(jsx-namespace.d.ts, 10, 80))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>IntrinsicAttributes : Symbol(JSX.IntrinsicAttributes, Decl(index.d.ts, 11, 44))
+
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+>ReactJSXIntrinsicClassAttributes : Symbol(ReactJSXIntrinsicClassAttributes, Decl(jsx-namespace.d.ts, 11, 58))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 12, 38))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>IntrinsicClassAttributes : Symbol(JSX.IntrinsicClassAttributes, Decl(index.d.ts, 12, 36))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 12, 38))
+
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+>ReactJSXIntrinsicElements : Symbol(ReactJSXIntrinsicElements, Decl(jsx-namespace.d.ts, 12, 74))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>IntrinsicElements : Symbol(JSX.IntrinsicElements, Decl(index.d.ts, 13, 44))
+
+export namespace EmotionJSX {
+>EmotionJSX : Symbol(EmotionJSX, Decl(jsx-namespace.d.ts, 13, 54))
+
+  interface Element extends ReactJSXElement {}
+>Element : Symbol(Element, Decl(jsx-namespace.d.ts, 15, 29))
+>ReactJSXElement : Symbol(ReactJSXElement, Decl(jsx-namespace.d.ts, 4, 5))
+
+  interface ElementClass extends ReactJSXElementClass {}
+>ElementClass : Symbol(ElementClass, Decl(jsx-namespace.d.ts, 16, 46))
+>ReactJSXElementClass : Symbol(ReactJSXElementClass, Decl(jsx-namespace.d.ts, 6, 34))
+
+  interface ElementAttributesProperty
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(jsx-namespace.d.ts, 17, 56))
+
+    extends ReactJSXElementAttributesProperty {}
+>ReactJSXElementAttributesProperty : Symbol(ReactJSXElementAttributesProperty, Decl(jsx-namespace.d.ts, 7, 44))
+
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(jsx-namespace.d.ts, 19, 48))
+>ReactJSXElementChildrenAttribute : Symbol(ReactJSXElementChildrenAttribute, Decl(jsx-namespace.d.ts, 8, 70))
+
+  type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+>LibraryManagedAttributes : Symbol(LibraryManagedAttributes, Decl(jsx-namespace.d.ts, 20, 80))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 22, 32))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 22, 34))
+>WithConditionalCSSProp : Symbol(WithConditionalCSSProp, Decl(jsx-namespace.d.ts, 0, 14))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 22, 34))
+
+    ReactJSXLibraryManagedAttributes<C, P>
+>ReactJSXLibraryManagedAttributes : Symbol(ReactJSXLibraryManagedAttributes, Decl(jsx-namespace.d.ts, 9, 68))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 22, 32))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 22, 34))
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+>IntrinsicAttributes : Symbol(IntrinsicAttributes, Decl(jsx-namespace.d.ts, 23, 42))
+>ReactJSXIntrinsicAttributes : Symbol(ReactJSXIntrinsicAttributes, Decl(jsx-namespace.d.ts, 10, 80))
+
+  interface IntrinsicClassAttributes<T>
+>IntrinsicClassAttributes : Symbol(IntrinsicClassAttributes, Decl(jsx-namespace.d.ts, 25, 70))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 26, 37))
+
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+>ReactJSXIntrinsicClassAttributes : Symbol(ReactJSXIntrinsicClassAttributes, Decl(jsx-namespace.d.ts, 11, 58))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 26, 37))
+
+  type IntrinsicElements = {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(jsx-namespace.d.ts, 27, 50))
+
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+>K : Symbol(K, Decl(jsx-namespace.d.ts, 30, 5))
+>ReactJSXIntrinsicElements : Symbol(ReactJSXIntrinsicElements, Decl(jsx-namespace.d.ts, 12, 74))
+>ReactJSXIntrinsicElements : Symbol(ReactJSXIntrinsicElements, Decl(jsx-namespace.d.ts, 12, 74))
+>K : Symbol(K, Decl(jsx-namespace.d.ts, 30, 5))
+
+      css?: string
+>css : Symbol(css, Decl(jsx-namespace.d.ts, 30, 76))
+    }
+  }
+}
+
+=== /index.tsx ===
+export const Comp = () => <div css="color: hotpink;"></div>;
+>Comp : Symbol(Comp, Decl(index.tsx, 0, 12))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 33))
+>css : Symbol(css, Decl(index.tsx, 0, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 33))
+
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types
new file mode 100644
index 0000000000000..908570a3e5f76
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types
@@ -0,0 +1,112 @@
+=== /node_modules/react/index.d.ts ===
+export = React;
+>React : any
+
+export as namespace React;
+>React : any
+
+declare namespace React {}
+
+declare global {
+>global : any
+
+  namespace JSX {
+    interface Element {}
+    interface ElementClass {}
+    interface ElementAttributesProperty {}
+    interface ElementChildrenAttribute {}
+    type LibraryManagedAttributes<C, P> = {}
+>LibraryManagedAttributes : LibraryManagedAttributes<C, P>
+
+    interface IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T> {}
+    interface IntrinsicElements {
+      div: {}
+>div : {}
+    }
+  }
+}
+=== /node_modules/@emotion/react/jsx-runtime/index.d.ts ===
+export { EmotionJSX as JSX } from './jsx-namespace'
+>EmotionJSX : any
+>JSX : any
+
+=== /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts ===
+import 'react'
+
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+>WithConditionalCSSProp : WithConditionalCSSProp<P>
+
+  ? (P extends { className?: string } ? P & { css?: string } : P)
+>className : string | undefined
+>css : string | undefined
+
+  : P
+
+type ReactJSXElement = JSX.Element
+>ReactJSXElement : JSX.Element
+>JSX : any
+
+type ReactJSXElementClass = JSX.ElementClass
+>ReactJSXElementClass : JSX.ElementClass
+>JSX : any
+
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+>ReactJSXElementAttributesProperty : JSX.ElementAttributesProperty
+>JSX : any
+
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+>ReactJSXElementChildrenAttribute : JSX.ElementChildrenAttribute
+>JSX : any
+
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+>ReactJSXLibraryManagedAttributes : JSX.LibraryManagedAttributes<C, P>
+>JSX : any
+
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+>ReactJSXIntrinsicAttributes : JSX.IntrinsicAttributes
+>JSX : any
+
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+>ReactJSXIntrinsicClassAttributes : ReactJSXIntrinsicClassAttributes<T>
+>JSX : any
+
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+>ReactJSXIntrinsicElements : JSX.IntrinsicElements
+>JSX : any
+
+export namespace EmotionJSX {
+  interface Element extends ReactJSXElement {}
+  interface ElementClass extends ReactJSXElementClass {}
+  interface ElementAttributesProperty
+    extends ReactJSXElementAttributesProperty {}
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+
+  type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+>LibraryManagedAttributes : LibraryManagedAttributes<C, P>
+
+    ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = {
+>IntrinsicElements : IntrinsicElements
+
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: string
+>css : string | undefined
+    }
+  }
+}
+
+=== /index.tsx ===
+export const Comp = () => <div css="color: hotpink;"></div>;
+>Comp : () => JSX.Element
+>() => <div css="color: hotpink;"></div> : () => JSX.Element
+><div css="color: hotpink;"></div> : JSX.Element
+>div : any
+>css : string
+>div : any
+
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt
new file mode 100644
index 0000000000000..e02782e3adcf6
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt
@@ -0,0 +1,74 @@
+/index.tsx(2,28): error TS2708: Cannot use namespace 'React' as a value.
+/index.tsx(2,32): error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
+  Property 'css' does not exist on type '{}'.
+
+
+==== /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<C, P> = {}
+            interface IntrinsicAttributes { }
+            interface IntrinsicClassAttributes<T> { }
+            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<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
+    type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+    type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+    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<C, P> = WithConditionalCSSProp<P> &
+            ReactJSXLibraryManagedAttributes<C, P>
+    
+        interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { }
+        interface IntrinsicClassAttributes<T>
+            extends ReactJSXIntrinsicClassAttributes<T> { }
+    
+        type IntrinsicElements = {
+            [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+                css?: string
+            }
+        }
+    }
+    
+==== /index.tsx (2 errors) ====
+    /* @jsxImportSource @emotion/react */
+    export const Comp = () => <div css="color: hotpink;"></div>;
+                               ~~~
+!!! error TS2708: Cannot use namespace 'React' as a value.
+                                   ~~~
+!!! error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
+!!! error TS2322:   Property 'css' does not exist on type '{}'.
+    
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.js b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.js
new file mode 100644
index 0000000000000..47fbcb73eae4d
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.js
@@ -0,0 +1,75 @@
+//// [tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.tsx] ////
+
+//// [index.d.ts]
+export = React;
+export as namespace React;
+
+declare namespace React { }
+
+declare global {
+    namespace JSX {
+        interface Element { }
+        interface ElementClass { }
+        interface ElementAttributesProperty { }
+        interface ElementChildrenAttribute { }
+        type LibraryManagedAttributes<C, P> = {}
+        interface IntrinsicAttributes { }
+        interface IntrinsicClassAttributes<T> { }
+        interface IntrinsicElements {
+            div: {}
+        }
+    }
+}
+//// [index.d.ts]
+export { EmotionJSX as JSX } from './jsx-namespace'
+
+//// [jsx-namespace.d.ts]
+import 'react'
+
+type WithConditionalCSSProp<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+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<C, P> = WithConditionalCSSProp<P> &
+        ReactJSXLibraryManagedAttributes<C, P>
+
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { }
+    interface IntrinsicClassAttributes<T>
+        extends ReactJSXIntrinsicClassAttributes<T> { }
+
+    type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+            css?: string
+        }
+    }
+}
+
+//// [index.tsx]
+/* @jsxImportSource @emotion/react */
+export const Comp = () => <div css="color: hotpink;"></div>;
+
+
+//// [index.js]
+"use strict";
+exports.__esModule = true;
+exports.Comp = void 0;
+var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+/* @jsxImportSource @emotion/react */
+var Comp = function () { return jsx_runtime_1.jsx("div", { css: "color: hotpink;" }, void 0); };
+exports.Comp = Comp;
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols
new file mode 100644
index 0000000000000..1387dc529c043
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols
@@ -0,0 +1,185 @@
+=== /node_modules/react/index.d.ts ===
+export = React;
+>React : Symbol(React, Decl(index.d.ts, 1, 26))
+
+export as namespace React;
+>React : Symbol(React, Decl(index.d.ts, 0, 15))
+
+declare namespace React { }
+>React : Symbol(React, Decl(index.d.ts, 1, 26))
+
+declare global {
+>global : Symbol(global, Decl(index.d.ts, 3, 27))
+
+    namespace JSX {
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+
+        interface Element { }
+>Element : Symbol(Element, Decl(index.d.ts, 6, 19))
+
+        interface ElementClass { }
+>ElementClass : Symbol(ElementClass, Decl(index.d.ts, 7, 29))
+
+        interface ElementAttributesProperty { }
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(index.d.ts, 8, 34))
+
+        interface ElementChildrenAttribute { }
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(index.d.ts, 9, 47))
+
+        type LibraryManagedAttributes<C, P> = {}
+>LibraryManagedAttributes : Symbol(LibraryManagedAttributes, Decl(index.d.ts, 10, 46))
+>C : Symbol(C, Decl(index.d.ts, 11, 38))
+>P : Symbol(P, Decl(index.d.ts, 11, 40))
+
+        interface IntrinsicAttributes { }
+>IntrinsicAttributes : Symbol(IntrinsicAttributes, Decl(index.d.ts, 11, 48))
+
+        interface IntrinsicClassAttributes<T> { }
+>IntrinsicClassAttributes : Symbol(IntrinsicClassAttributes, Decl(index.d.ts, 12, 41))
+>T : Symbol(T, Decl(index.d.ts, 13, 43))
+
+        interface IntrinsicElements {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(index.d.ts, 13, 49))
+
+            div: {}
+>div : Symbol(IntrinsicElements.div, Decl(index.d.ts, 14, 37))
+        }
+    }
+}
+=== /node_modules/@emotion/react/jsx-runtime/index.d.ts ===
+export { EmotionJSX as JSX } from './jsx-namespace'
+>EmotionJSX : Symbol(EmotionJSX, Decl(jsx-namespace.d.ts, 13, 54))
+>JSX : Symbol(JSX, Decl(index.d.ts, 0, 8))
+
+=== /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts ===
+import 'react'
+
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+>WithConditionalCSSProp : Symbol(WithConditionalCSSProp, Decl(jsx-namespace.d.ts, 0, 14))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+
+    ? (P extends { className?: string } ? P & { css?: string } : P)
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+>className : Symbol(className, Decl(jsx-namespace.d.ts, 3, 18))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+>css : Symbol(css, Decl(jsx-namespace.d.ts, 3, 47))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+
+    : P
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 2, 28))
+
+type ReactJSXElement = JSX.Element
+>ReactJSXElement : Symbol(ReactJSXElement, Decl(jsx-namespace.d.ts, 4, 7))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>Element : Symbol(JSX.Element, Decl(index.d.ts, 6, 19))
+
+type ReactJSXElementClass = JSX.ElementClass
+>ReactJSXElementClass : Symbol(ReactJSXElementClass, Decl(jsx-namespace.d.ts, 6, 34))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>ElementClass : Symbol(JSX.ElementClass, Decl(index.d.ts, 7, 29))
+
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+>ReactJSXElementAttributesProperty : Symbol(ReactJSXElementAttributesProperty, Decl(jsx-namespace.d.ts, 7, 44))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>ElementAttributesProperty : Symbol(JSX.ElementAttributesProperty, Decl(index.d.ts, 8, 34))
+
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+>ReactJSXElementChildrenAttribute : Symbol(ReactJSXElementChildrenAttribute, Decl(jsx-namespace.d.ts, 8, 70))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>ElementChildrenAttribute : Symbol(JSX.ElementChildrenAttribute, Decl(index.d.ts, 9, 47))
+
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+>ReactJSXLibraryManagedAttributes : Symbol(ReactJSXLibraryManagedAttributes, Decl(jsx-namespace.d.ts, 9, 68))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 10, 38))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 10, 40))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>LibraryManagedAttributes : Symbol(JSX.LibraryManagedAttributes, Decl(index.d.ts, 10, 46))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 10, 38))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 10, 40))
+
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+>ReactJSXIntrinsicAttributes : Symbol(ReactJSXIntrinsicAttributes, Decl(jsx-namespace.d.ts, 10, 80))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>IntrinsicAttributes : Symbol(JSX.IntrinsicAttributes, Decl(index.d.ts, 11, 48))
+
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+>ReactJSXIntrinsicClassAttributes : Symbol(ReactJSXIntrinsicClassAttributes, Decl(jsx-namespace.d.ts, 11, 58))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 12, 38))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>IntrinsicClassAttributes : Symbol(JSX.IntrinsicClassAttributes, Decl(index.d.ts, 12, 41))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 12, 38))
+
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+>ReactJSXIntrinsicElements : Symbol(ReactJSXIntrinsicElements, Decl(jsx-namespace.d.ts, 12, 74))
+>JSX : Symbol(JSX, Decl(index.d.ts, 5, 16))
+>IntrinsicElements : Symbol(JSX.IntrinsicElements, Decl(index.d.ts, 13, 49))
+
+export namespace EmotionJSX {
+>EmotionJSX : Symbol(EmotionJSX, Decl(jsx-namespace.d.ts, 13, 54))
+
+    interface Element extends ReactJSXElement { }
+>Element : Symbol(Element, Decl(jsx-namespace.d.ts, 15, 29))
+>ReactJSXElement : Symbol(ReactJSXElement, Decl(jsx-namespace.d.ts, 4, 7))
+
+    interface ElementClass extends ReactJSXElementClass { }
+>ElementClass : Symbol(ElementClass, Decl(jsx-namespace.d.ts, 16, 49))
+>ReactJSXElementClass : Symbol(ReactJSXElementClass, Decl(jsx-namespace.d.ts, 6, 34))
+
+    interface ElementAttributesProperty
+>ElementAttributesProperty : Symbol(ElementAttributesProperty, Decl(jsx-namespace.d.ts, 17, 59))
+
+        extends ReactJSXElementAttributesProperty { }
+>ReactJSXElementAttributesProperty : Symbol(ReactJSXElementAttributesProperty, Decl(jsx-namespace.d.ts, 7, 44))
+
+    interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute { }
+>ElementChildrenAttribute : Symbol(ElementChildrenAttribute, Decl(jsx-namespace.d.ts, 19, 53))
+>ReactJSXElementChildrenAttribute : Symbol(ReactJSXElementChildrenAttribute, Decl(jsx-namespace.d.ts, 8, 70))
+
+    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+>LibraryManagedAttributes : Symbol(LibraryManagedAttributes, Decl(jsx-namespace.d.ts, 20, 83))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 22, 34))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 22, 36))
+>WithConditionalCSSProp : Symbol(WithConditionalCSSProp, Decl(jsx-namespace.d.ts, 0, 14))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 22, 36))
+
+        ReactJSXLibraryManagedAttributes<C, P>
+>ReactJSXLibraryManagedAttributes : Symbol(ReactJSXLibraryManagedAttributes, Decl(jsx-namespace.d.ts, 9, 68))
+>C : Symbol(C, Decl(jsx-namespace.d.ts, 22, 34))
+>P : Symbol(P, Decl(jsx-namespace.d.ts, 22, 36))
+
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { }
+>IntrinsicAttributes : Symbol(IntrinsicAttributes, Decl(jsx-namespace.d.ts, 23, 46))
+>ReactJSXIntrinsicAttributes : Symbol(ReactJSXIntrinsicAttributes, Decl(jsx-namespace.d.ts, 10, 80))
+
+    interface IntrinsicClassAttributes<T>
+>IntrinsicClassAttributes : Symbol(IntrinsicClassAttributes, Decl(jsx-namespace.d.ts, 25, 73))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 26, 39))
+
+        extends ReactJSXIntrinsicClassAttributes<T> { }
+>ReactJSXIntrinsicClassAttributes : Symbol(ReactJSXIntrinsicClassAttributes, Decl(jsx-namespace.d.ts, 11, 58))
+>T : Symbol(T, Decl(jsx-namespace.d.ts, 26, 39))
+
+    type IntrinsicElements = {
+>IntrinsicElements : Symbol(IntrinsicElements, Decl(jsx-namespace.d.ts, 27, 55))
+
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+>K : Symbol(K, Decl(jsx-namespace.d.ts, 30, 9))
+>ReactJSXIntrinsicElements : Symbol(ReactJSXIntrinsicElements, Decl(jsx-namespace.d.ts, 12, 74))
+>ReactJSXIntrinsicElements : Symbol(ReactJSXIntrinsicElements, Decl(jsx-namespace.d.ts, 12, 74))
+>K : Symbol(K, Decl(jsx-namespace.d.ts, 30, 9))
+
+            css?: string
+>css : Symbol(css, Decl(jsx-namespace.d.ts, 30, 80))
+        }
+    }
+}
+
+=== /index.tsx ===
+/* @jsxImportSource @emotion/react */
+export const Comp = () => <div css="color: hotpink;"></div>;
+>Comp : Symbol(Comp, Decl(index.tsx, 1, 12))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 37))
+>css : Symbol(css, Decl(index.tsx, 1, 30))
+>div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 37))
+
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types
new file mode 100644
index 0000000000000..e2ce6be04faa7
--- /dev/null
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types
@@ -0,0 +1,113 @@
+=== /node_modules/react/index.d.ts ===
+export = React;
+>React : any
+
+export as namespace React;
+>React : any
+
+declare namespace React { }
+
+declare global {
+>global : any
+
+    namespace JSX {
+        interface Element { }
+        interface ElementClass { }
+        interface ElementAttributesProperty { }
+        interface ElementChildrenAttribute { }
+        type LibraryManagedAttributes<C, P> = {}
+>LibraryManagedAttributes : LibraryManagedAttributes<C, P>
+
+        interface IntrinsicAttributes { }
+        interface IntrinsicClassAttributes<T> { }
+        interface IntrinsicElements {
+            div: {}
+>div : {}
+        }
+    }
+}
+=== /node_modules/@emotion/react/jsx-runtime/index.d.ts ===
+export { EmotionJSX as JSX } from './jsx-namespace'
+>EmotionJSX : any
+>JSX : any
+
+=== /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts ===
+import 'react'
+
+type WithConditionalCSSProp<P> = 'className' extends keyof P
+>WithConditionalCSSProp : WithConditionalCSSProp<P>
+
+    ? (P extends { className?: string } ? P & { css?: string } : P)
+>className : string | undefined
+>css : string | undefined
+
+    : P
+
+type ReactJSXElement = JSX.Element
+>ReactJSXElement : JSX.Element
+>JSX : any
+
+type ReactJSXElementClass = JSX.ElementClass
+>ReactJSXElementClass : JSX.ElementClass
+>JSX : any
+
+type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
+>ReactJSXElementAttributesProperty : JSX.ElementAttributesProperty
+>JSX : any
+
+type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
+>ReactJSXElementChildrenAttribute : JSX.ElementChildrenAttribute
+>JSX : any
+
+type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
+>ReactJSXLibraryManagedAttributes : JSX.LibraryManagedAttributes<C, P>
+>JSX : any
+
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+>ReactJSXIntrinsicAttributes : JSX.IntrinsicAttributes
+>JSX : any
+
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+>ReactJSXIntrinsicClassAttributes : ReactJSXIntrinsicClassAttributes<T>
+>JSX : any
+
+type ReactJSXIntrinsicElements = JSX.IntrinsicElements
+>ReactJSXIntrinsicElements : JSX.IntrinsicElements
+>JSX : any
+
+export namespace EmotionJSX {
+    interface Element extends ReactJSXElement { }
+    interface ElementClass extends ReactJSXElementClass { }
+    interface ElementAttributesProperty
+        extends ReactJSXElementAttributesProperty { }
+    interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute { }
+
+    type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
+>LibraryManagedAttributes : LibraryManagedAttributes<C, P>
+
+        ReactJSXLibraryManagedAttributes<C, P>
+
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { }
+    interface IntrinsicClassAttributes<T>
+        extends ReactJSXIntrinsicClassAttributes<T> { }
+
+    type IntrinsicElements = {
+>IntrinsicElements : IntrinsicElements
+
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+            css?: string
+>css : string | undefined
+        }
+    }
+}
+
+=== /index.tsx ===
+/* @jsxImportSource @emotion/react */
+export const Comp = () => <div css="color: hotpink;"></div>;
+>Comp : () => JSX.Element
+>() => <div css="color: hotpink;"></div> : () => JSX.Element
+><div css="color: hotpink;"></div> : JSX.Element
+>div : any
+>css : string
+>div : any
+
diff --git a/tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.tsx b/tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.tsx
new file mode 100644
index 0000000000000..c226c1f7c8d49
--- /dev/null
+++ b/tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.tsx
@@ -0,0 +1,65 @@
+// @strict: true
+// @jsx: react-jsx
+// @jsxImportSource: @emotion/react
+// @filename: /node_modules/react/index.d.ts
+export = React;
+export as namespace React;
+
+declare namespace React {}
+
+declare global {
+  namespace JSX {
+    interface Element {}
+    interface ElementClass {}
+    interface ElementAttributesProperty {}
+    interface ElementChildrenAttribute {}
+    type LibraryManagedAttributes<C, P> = {}
+    interface IntrinsicAttributes {}
+    interface IntrinsicClassAttributes<T> {}
+    interface IntrinsicElements {
+      div: {}
+    }
+  }
+}
+// @filename: /node_modules/@emotion/react/jsx-runtime/index.d.ts
+export { EmotionJSX as JSX } from './jsx-namespace'
+
+// @filename: /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts
+import 'react'
+
+type WithConditionalCSSProp<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+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<C, P> = WithConditionalCSSProp<P> &
+    ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = {
+    [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+      css?: string
+    }
+  }
+}
+
+// @filename: /index.tsx
+export const Comp = () => <div css="color: hotpink;"></div>;
diff --git a/tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.tsx b/tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.tsx
new file mode 100644
index 0000000000000..11d415852c1fd
--- /dev/null
+++ b/tests/cases/compiler/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.tsx
@@ -0,0 +1,65 @@
+// @strict: true
+// @jsx: react
+// @filename: /node_modules/react/index.d.ts
+export = React;
+export as namespace React;
+
+declare namespace React { }
+
+declare global {
+    namespace JSX {
+        interface Element { }
+        interface ElementClass { }
+        interface ElementAttributesProperty { }
+        interface ElementChildrenAttribute { }
+        type LibraryManagedAttributes<C, P> = {}
+        interface IntrinsicAttributes { }
+        interface IntrinsicClassAttributes<T> { }
+        interface IntrinsicElements {
+            div: {}
+        }
+    }
+}
+// @filename: /node_modules/@emotion/react/jsx-runtime/index.d.ts
+export { EmotionJSX as JSX } from './jsx-namespace'
+
+// @filename: /node_modules/@emotion/react/jsx-runtime/jsx-namespace.d.ts
+import 'react'
+
+type WithConditionalCSSProp<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
+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<C, P> = WithConditionalCSSProp<P> &
+        ReactJSXLibraryManagedAttributes<C, P>
+
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { }
+    interface IntrinsicClassAttributes<T>
+        extends ReactJSXIntrinsicClassAttributes<T> { }
+
+    type IntrinsicElements = {
+        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
+            css?: string
+        }
+    }
+}
+
+// @filename: /index.tsx
+/* @jsxImportSource @emotion/react */
+export const Comp = () => <div css="color: hotpink;"></div>;

From 08706551dd30543fa94039da8ab5d771c8ffd3c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Fri, 13 Nov 2020 15:50:09 +0100
Subject: [PATCH 2/3] Fixed an issue with global React namespace being
 preferred over config & pragma implicit ones

---
 src/compiler/checker.ts                       |  8 ++-
 ...ceFromConfigPickedOverGlobalOne.errors.txt | 70 -------------------
 ...spaceFromConfigPickedOverGlobalOne.symbols |  4 +-
 ...mespaceFromConfigPickedOverGlobalOne.types |  8 +--
 ...ceFromPragmaPickedOverGlobalOne.errors.txt |  7 +-
 ...spaceFromPragmaPickedOverGlobalOne.symbols |  4 +-
 ...mespaceFromPragmaPickedOverGlobalOne.types |  6 +-
 7 files changed, 17 insertions(+), 90 deletions(-)
 delete mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt

diff --git a/src/compiler/checker.ts b/src/compiler/checker.ts
index 9a71a6a0277e8..91cafa70cf6eb 100644
--- a/src/compiler/checker.ts
+++ b/src/compiler/checker.ts
@@ -25183,11 +25183,13 @@ namespace ts {
                 return links.jsxNamespace;
             }
             if (!links || links.jsxNamespace !== false) {
-                const namespaceName = getJsxNamespace(location);
-                let resolvedNamespace = resolveName(location, namespaceName, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined, namespaceName, /*isUse*/ false);
+                let resolvedNamespace = getJsxNamespaceContainerForImplicitImport(location);
+
                 if (!resolvedNamespace || resolvedNamespace === unknownSymbol) {
-                    resolvedNamespace = getJsxNamespaceContainerForImplicitImport(location);
+                    const namespaceName = getJsxNamespace(location);
+                    resolvedNamespace = resolveName(location, namespaceName, SymbolFlags.Namespace, /*diagnosticMessage*/ undefined, namespaceName, /*isUse*/ false);
                 }
+
                 if (resolvedNamespace) {
                     const candidate = resolveSymbol(getSymbol(getExportsOfSymbol(resolveSymbol(resolvedNamespace)), JsxNames.JSX, SymbolFlags.Namespace));
                     if (candidate && candidate !== unknownSymbol) {
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt
deleted file mode 100644
index 9cbe47a9ee62c..0000000000000
--- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.errors.txt
+++ /dev/null
@@ -1,70 +0,0 @@
-/index.tsx(1,32): error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
-  Property 'css' does not exist on type '{}'.
-
-
-==== /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<C, P> = {}
-        interface IntrinsicAttributes {}
-        interface IntrinsicClassAttributes<T> {}
-        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<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
-    type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
-    type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
-    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<C, P> = WithConditionalCSSProp<P> &
-        ReactJSXLibraryManagedAttributes<C, P>
-    
-      interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
-      interface IntrinsicClassAttributes<T>
-        extends ReactJSXIntrinsicClassAttributes<T> {}
-    
-      type IntrinsicElements = {
-        [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
-          css?: string
-        }
-      }
-    }
-    
-==== /index.tsx (1 errors) ====
-    export const Comp = () => <div css="color: hotpink;"></div>;
-                                   ~~~
-!!! error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
-!!! error TS2322:   Property 'css' does not exist on type '{}'.
-    
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols
index 8d16fd5c00e91..b7fff94cf86e6 100644
--- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.symbols
@@ -178,7 +178,7 @@ export namespace EmotionJSX {
 === /index.tsx ===
 export const Comp = () => <div css="color: hotpink;"></div>;
 >Comp : Symbol(Comp, Decl(index.tsx, 0, 12))
->div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 33))
+>div : Symbol(div, Decl(index.d.ts, 14, 33))
 >css : Symbol(css, Decl(index.tsx, 0, 30))
->div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 33))
+>div : Symbol(div, Decl(index.d.ts, 14, 33))
 
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types
index 908570a3e5f76..1bfeba07c4f7e 100644
--- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromConfigPickedOverGlobalOne.types
@@ -3,7 +3,7 @@ export = React;
 >React : any
 
 export as namespace React;
->React : any
+>React : error
 
 declare namespace React {}
 
@@ -103,9 +103,9 @@ export namespace EmotionJSX {
 
 === /index.tsx ===
 export const Comp = () => <div css="color: hotpink;"></div>;
->Comp : () => JSX.Element
->() => <div css="color: hotpink;"></div> : () => JSX.Element
-><div css="color: hotpink;"></div> : JSX.Element
+>Comp : () => import("/node_modules/@emotion/react/jsx-runtime/jsx-namespace").EmotionJSX.Element
+>() => <div css="color: hotpink;"></div> : () => import("/node_modules/@emotion/react/jsx-runtime/jsx-namespace").EmotionJSX.Element
+><div css="color: hotpink;"></div> : import("/node_modules/@emotion/react/jsx-runtime/jsx-namespace").EmotionJSX.Element
 >div : any
 >css : string
 >div : any
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt
index e02782e3adcf6..f62b476f13c7c 100644
--- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt
@@ -1,6 +1,4 @@
 /index.tsx(2,28): error TS2708: Cannot use namespace 'React' as a value.
-/index.tsx(2,32): error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
-  Property 'css' does not exist on type '{}'.
 
 
 ==== /node_modules/react/index.d.ts (0 errors) ====
@@ -63,12 +61,9 @@
         }
     }
     
-==== /index.tsx (2 errors) ====
+==== /index.tsx (1 errors) ====
     /* @jsxImportSource @emotion/react */
     export const Comp = () => <div css="color: hotpink;"></div>;
                                ~~~
 !!! error TS2708: Cannot use namespace 'React' as a value.
-                                   ~~~
-!!! error TS2322: Type '{ css: string; }' is not assignable to type '{}'.
-!!! error TS2322:   Property 'css' does not exist on type '{}'.
     
\ No newline at end of file
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols
index 1387dc529c043..95969edc9f3df 100644
--- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.symbols
@@ -179,7 +179,7 @@ export namespace EmotionJSX {
 /* @jsxImportSource @emotion/react */
 export const Comp = () => <div css="color: hotpink;"></div>;
 >Comp : Symbol(Comp, Decl(index.tsx, 1, 12))
->div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 37))
+>div : Symbol(div, Decl(index.d.ts, 14, 37))
 >css : Symbol(css, Decl(index.tsx, 1, 30))
->div : Symbol(JSX.IntrinsicElements.div, Decl(index.d.ts, 14, 37))
+>div : Symbol(div, Decl(index.d.ts, 14, 37))
 
diff --git a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types
index e2ce6be04faa7..c7e2aeb868276 100644
--- a/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types
+++ b/tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.types
@@ -104,9 +104,9 @@ export namespace EmotionJSX {
 === /index.tsx ===
 /* @jsxImportSource @emotion/react */
 export const Comp = () => <div css="color: hotpink;"></div>;
->Comp : () => JSX.Element
->() => <div css="color: hotpink;"></div> : () => JSX.Element
-><div css="color: hotpink;"></div> : JSX.Element
+>Comp : () => import("/node_modules/@emotion/react/jsx-runtime/jsx-namespace").EmotionJSX.Element
+>() => <div css="color: hotpink;"></div> : () => import("/node_modules/@emotion/react/jsx-runtime/jsx-namespace").EmotionJSX.Element
+><div css="color: hotpink;"></div> : import("/node_modules/@emotion/react/jsx-runtime/jsx-namespace").EmotionJSX.Element
 >div : any
 >css : string
 >div : any

From 9e18902cc3da5dc427bab14b449a44118dd96c15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sat, 14 Nov 2020 11:21:36 +0100
Subject: [PATCH 3/3] Do not try to mark JSX classic runtime symbols as used
 when automatic runtime is used

---
 src/compiler/checker.ts                       | 43 ++++++------
 ...ressionNotCountedAsChild(jsx=react-jsx).js |  2 -
 ...sionNotCountedAsChild(jsx=react-jsxdev).js |  2 -
 ...ceFromPragmaPickedOverGlobalOne.errors.txt | 69 -------------------
 ...mespaceFromPragmaPickedOverGlobalOne.types |  2 +-
 5 files changed, 24 insertions(+), 94 deletions(-)
 delete mode 100644 tests/baselines/reference/jsxNamespaceImplicitImportJSXNamespaceFromPragmaPickedOverGlobalOne.errors.txt

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 ? (<JsxOpeningLikeElement>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 ? (<JsxOpeningLikeElement>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");
-/// <reference path="react16.d.ts" />
-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";
-/// <reference path="react16.d.ts" />
-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<C, P> = {}
-            interface IntrinsicAttributes { }
-            interface IntrinsicClassAttributes<T> { }
-            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<P> = '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<C, P> = JSX.LibraryManagedAttributes<C, P>
-    type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
-    type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
-    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<C, P> = WithConditionalCSSProp<P> &
-            ReactJSXLibraryManagedAttributes<C, P>
-    
-        interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes { }
-        interface IntrinsicClassAttributes<T>
-            extends ReactJSXIntrinsicClassAttributes<T> { }
-    
-        type IntrinsicElements = {
-            [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
-                css?: string
-            }
-        }
-    }
-    
-==== /index.tsx (1 errors) ====
-    /* @jsxImportSource @emotion/react */
-    export const Comp = () => <div css="color: hotpink;"></div>;
-                               ~~~
-!!! 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 { }