Use the import * as React from 'react' pattern (#2242)

RobinMalfait · web-flow · commit 0276231c318f · 2023-02-02T15:34:16.000+01:00
* use the `import * as React from 'react'` pattern We use named imports, but we have to import `React` itself as well for JSX because it compiles to `React.createElement`. We could get rid of our own JSX and use it directly, or we can use this `import * as React from 'react'` syntax. This fixes an issue for people using `allowSyntheticDefaultImports: false` in TypeScript. Fixes: #2117 * update changelog
diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix SSR tab hydration when using Strict Mode in development ([#2231](https://github.com/tailwindlabs/headlessui/pull/2231))
 - Don't break overflow when multiple dialogs are open at the same time ([#2215](https://github.com/tailwindlabs/headlessui/pull/2215))
 - Fix "This `Suspense` boundary received an update before it finished hydrating" error in the `Disclosure` component ([#2238](https://github.com/tailwindlabs/headlessui/pull/2238))
+- Use the `import * as React from 'react'` pattern ([#2242](https://github.com/tailwindlabs/headlessui/pull/2242))
 
 ## [1.7.8] - 2023-01-27
 
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   createRef,
diff --git a/packages/@headlessui-react/src/components/description/description.tsx b/packages/@headlessui-react/src/components/description/description.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   useContext,
   useMemo,
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -1,5 +1,6 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
-import React, {
+import * as React from 'react'
+import {
   createContext,
   createRef,
   useContext,
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -1,5 +1,6 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   useContext,
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   useEffect,
   useRef,
 
diff --git a/packages/@headlessui-react/src/components/label/label.tsx b/packages/@headlessui-react/src/components/label/label.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   useContext,
   useMemo,
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   createRef,
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -1,5 +1,6 @@
 // WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   createRef,
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   createRef,
   useContext,
diff --git a/packages/@headlessui-react/src/components/portal/portal.tsx b/packages/@headlessui-react/src/components/portal/portal.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   useContext,
diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   useContext,
   useMemo,
diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   useContext,
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   useContext,
diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   Fragment,
   createContext,
   useContext,
diff --git a/packages/@headlessui-react/src/hooks/use-event.ts b/packages/@headlessui-react/src/hooks/use-event.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useLatestValue } from './use-latest-value'
 
 export let useEvent =
diff --git a/packages/@headlessui-react/src/hooks/use-id.ts b/packages/@headlessui-react/src/hooks/use-id.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { useIsoMorphicEffect } from './use-iso-morphic-effect'
 import { useServerHandoffComplete } from './use-server-handoff-complete'
 import { env } from '../utils/env'
diff --git a/packages/@headlessui-react/src/internal/focus-sentinel.tsx b/packages/@headlessui-react/src/internal/focus-sentinel.tsx
@@ -1,4 +1,5 @@
-import React, { useState, FocusEvent as ReactFocusEvent } from 'react'
+import * as React from 'react'
+import { useState, FocusEvent as ReactFocusEvent } from 'react'
 
 import { Hidden, Features } from './hidden'
 
diff --git a/packages/@headlessui-react/src/internal/open-closed.tsx b/packages/@headlessui-react/src/internal/open-closed.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   useContext,
 
diff --git a/packages/@headlessui-react/src/internal/portal-force-root.tsx b/packages/@headlessui-react/src/internal/portal-force-root.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   useContext,
 
diff --git a/packages/@headlessui-react/src/internal/stack-context.tsx b/packages/@headlessui-react/src/internal/stack-context.tsx
@@ -1,4 +1,5 @@
-import React, {
+import * as React from 'react'
+import {
   createContext,
   useContext,
 
diff --git a/packages/@headlessui-react/src/utils/start-transition.ts b/packages/@headlessui-react/src/utils/start-transition.ts
@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 export let startTransition =
   // Prefer React's `startTransition` if it's available.
