fix: importing CJS React in ESM (#2154)

* fix: importing CJS React in ESM

* change disable comment

src/context.ts

@@ -1,15 +1,27 @@
-import {
-  createElement,
-  createContext as reactCreateContext,
-  useContext,
-  useMemo,
-  useRef,
-} from 'react'
+// import {
+//   createElement,
+//   createContext as reactCreateContext,
+//   useContext,
+//   useMemo,
+//   useRef,
+// } from 'react'
+// That doesnt work in ESM, because React libs are CJS only.
+// The following is a workaround until ESM is supported.
+// eslint-disable-next-line import/extensions
+import ReactExports from 'react'
 import type { ReactNode } from 'react'
 import type { StoreApi } from 'zustand'
 // eslint-disable-next-line import/extensions
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 
+const {
+  createElement,
+  createContext: reactCreateContext,
+  useContext,
+  useMemo,
+  useRef,
+} = ReactExports
+
 type UseContextStore<S extends StoreApi<unknown>> = {
   (): ExtractState<S>
   <U>(

src/react.ts

@@ -1,9 +1,11 @@
-import { useDebugValue } from 'react'
+// import { useDebugValue } from 'react'
 // import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
-// This doesn't work in ESM, because use-sync-external-store only exposes CJS.
+// Those don't work in ESM, because React libs are CJS only.
 // See: https://github.com/pmndrs/valtio/issues/452
 // The following is a workaround until ESM is supported.
 // eslint-disable-next-line import/extensions
+import ReactExports from 'react'
+// eslint-disable-next-line import/extensions
 import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
 import { createStore } from './vanilla.ts'
 import type {
@@ -13,6 +15,7 @@ import type {
   StoreMutatorIdentifier,
 } from './vanilla.ts'
 
+const { useDebugValue } = ReactExports
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports
 
 type ExtractState<S> = S extends { getState: () => infer T } ? T : never

src/react/shallow.ts

@@ -1,6 +1,12 @@
-import { useRef } from 'react'
+// import { useDebugValue } from 'react'
+// That doesnt work in ESM, because React libs are CJS only.
+// The following is a workaround until ESM is supported.
+// eslint-disable-next-line import/extensions
+import ReactExports from 'react'
 import { shallow } from '../vanilla/shallow.ts'
 
+const { useRef } = ReactExports
+
 export function useShallow<S, U>(selector: (state: S) => U): (state: S) => U {
   const prev = useRef<U>()
 

src/traditional.ts

@@ -1,9 +1,11 @@
-import { useDebugValue } from 'react'
+// import { useDebugValue } from 'react'
 // import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
-// This doesn't work in ESM, because use-sync-external-store only exposes CJS.
+// Those don't work in ESM, because React libs are CJS only.
 // See: https://github.com/pmndrs/valtio/issues/452
 // The following is a workaround until ESM is supported.
 // eslint-disable-next-line import/extensions
+import ReactExports from 'react'
+// eslint-disable-next-line import/extensions
 import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
 import { createStore } from './vanilla.ts'
 import type {
@@ -13,6 +15,7 @@ import type {
   StoreMutatorIdentifier,
 } from './vanilla.ts'
 
+const { useDebugValue } = ReactExports
 const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports
 
 type ExtractState<S> = S extends { getState: () => infer T } ? T : never