diff --git a/src/context.ts b/src/context.ts
index cd9cad9be6..36e70df6ba 100644
--- a/src/context.ts
+++ b/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>(
diff --git a/src/react.ts b/src/react.ts
index c0f52d6853..be34b8dfcc 100644
--- a/src/react.ts
+++ b/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
diff --git a/src/react/shallow.ts b/src/react/shallow.ts
index 234f905190..98e62daeec 100644
--- a/src/react/shallow.ts
+++ b/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>()
 
diff --git a/src/traditional.ts b/src/traditional.ts
index 94e1743cc7..be78a438bb 100644
--- a/src/traditional.ts
+++ b/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