diff --git a/src/component/UseKey.tsx b/src/component/UseKey.tsx
index 7420475582..e120832dc9 100644
--- a/src/component/UseKey.tsx
+++ b/src/component/UseKey.tsx
@@ -1,5 +1,5 @@
-import useKey from '../useKey';
-import createRenderProp from '../factory/createRenderProp';
+import useKey from '../useKey.js';
+import createRenderProp from '../factory/createRenderProp.js';
 
 const UseKey = createRenderProp(useKey, ({ filter, fn, deps, ...rest }) => [
   filter,
diff --git a/src/factory/createBreakpoint.ts b/src/factory/createBreakpoint.ts
index d61832827f..563e32d488 100644
--- a/src/factory/createBreakpoint.ts
+++ b/src/factory/createBreakpoint.ts
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { isBrowser, off, on } from '../misc/util';
+import { isBrowser, off, on } from '../misc/util.js';
 
 const createBreakpoint =
   (breakpoints: { [name: string]: number } = { laptopL: 1440, laptop: 1024, tablet: 768 }) =>
diff --git a/src/factory/createGlobalState.ts b/src/factory/createGlobalState.ts
index c06ba9a085..afa4676fc3 100644
--- a/src/factory/createGlobalState.ts
+++ b/src/factory/createGlobalState.ts
@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from '../misc/hookState';
-import useEffectOnce from '../useEffectOnce';
-import useIsomorphicLayoutEffect from '../useIsomorphicLayoutEffect';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from '../misc/hookState.js';
+import useEffectOnce from '../useEffectOnce.js';
+import useIsomorphicLayoutEffect from '../useIsomorphicLayoutEffect.js';
 
 export function createGlobalState<S = any>(
   initialState: IHookStateInitAction<S>
diff --git a/src/factory/createHTMLMediaHook.ts b/src/factory/createHTMLMediaHook.ts
index 92d62c9d79..9e3d0baf9a 100644
--- a/src/factory/createHTMLMediaHook.ts
+++ b/src/factory/createHTMLMediaHook.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import useSetState from '../useSetState';
-import parseTimeRanges from '../misc/parseTimeRanges';
+import useSetState from '../useSetState.js';
+import parseTimeRanges from '../misc/parseTimeRanges.js';
 
 export interface HTMLMediaProps
   extends React.AudioHTMLAttributes<any>,
diff --git a/src/factory/createReducer.ts b/src/factory/createReducer.ts
index ef2af42efc..d3b9496703 100644
--- a/src/factory/createReducer.ts
+++ b/src/factory/createReducer.ts
@@ -1,5 +1,5 @@
 import { MutableRefObject, useCallback, useRef, useState } from 'react';
-import useUpdateEffect from '../useUpdateEffect';
+import useUpdateEffect from '../useUpdateEffect.js';
 
 type Dispatch<Action> = (action: Action) => void;
 
diff --git a/src/index.ts b/src/index.ts
index 62b69356b7..65c86242d0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,117 +1,117 @@
-export { default as createMemo } from './factory/createMemo';
-export { default as createReducerContext } from './factory/createReducerContext';
-export { default as createReducer } from './factory/createReducer';
-export { default as createStateContext } from './factory/createStateContext';
-export { default as useAsync } from './useAsync';
-export { default as useAsyncFn } from './useAsyncFn';
-export { default as useAsyncRetry } from './useAsyncRetry';
-export { default as useAudio } from './useAudio';
-export { default as useBattery } from './useBattery';
-export { default as useBeforeUnload } from './useBeforeUnload';
-export { default as useBoolean } from './useBoolean';
-export { default as useClickAway } from './useClickAway';
-export { default as useCookie } from './useCookie';
-export { default as useCopyToClipboard } from './useCopyToClipboard';
-export { default as useCounter } from './useCounter';
-export { default as useCss } from './useCss';
-export { default as useCustomCompareEffect } from './useCustomCompareEffect';
-export { default as useDebounce } from './useDebounce';
-export { default as useDeepCompareEffect } from './useDeepCompareEffect';
-export { default as useDefault } from './useDefault';
-export { default as useDrop } from './useDrop';
-export { default as useDropArea } from './useDropArea';
-export { default as useEffectOnce } from './useEffectOnce';
-export { default as useEnsuredForwardedRef, ensuredForwardRef } from './useEnsuredForwardedRef';
-export { default as useEvent } from './useEvent';
-export { default as useError } from './useError';
-export { default as useFavicon } from './useFavicon';
-export { default as useFullscreen } from './useFullscreen';
-export { default as useGeolocation } from './useGeolocation';
-export { default as useGetSet } from './useGetSet';
-export { default as useGetSetState } from './useGetSetState';
-export { default as useHarmonicIntervalFn } from './useHarmonicIntervalFn';
-export { default as useHover } from './useHover';
-export { default as useHoverDirty } from './useHoverDirty';
-export { default as useIdle } from './useIdle';
-export { default as useIntersection } from './useIntersection';
-export { default as useInterval } from './useInterval';
-export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-export { default as useKey } from './useKey';
-export { default as createBreakpoint } from './factory/createBreakpoint';
+export { default as createMemo } from './factory/createMemo.js';
+export { default as createReducerContext } from './factory/createReducerContext.js';
+export { default as createReducer } from './factory/createReducer.js';
+export { default as createStateContext } from './factory/createStateContext.js';
+export { default as useAsync } from './useAsync.js';
+export { default as useAsyncFn } from './useAsyncFn.js';
+export { default as useAsyncRetry } from './useAsyncRetry.js';
+export { default as useAudio } from './useAudio.js';
+export { default as useBattery } from './useBattery.js';
+export { default as useBeforeUnload } from './useBeforeUnload.js';
+export { default as useBoolean } from './useBoolean.js';
+export { default as useClickAway } from './useClickAway.js';
+export { default as useCookie } from './useCookie.js';
+export { default as useCopyToClipboard } from './useCopyToClipboard.js';
+export { default as useCounter } from './useCounter.js';
+export { default as useCss } from './useCss.js';
+export { default as useCustomCompareEffect } from './useCustomCompareEffect.js';
+export { default as useDebounce } from './useDebounce.js';
+export { default as useDeepCompareEffect } from './useDeepCompareEffect.js';
+export { default as useDefault } from './useDefault.js';
+export { default as useDrop } from './useDrop.js';
+export { default as useDropArea } from './useDropArea.js';
+export { default as useEffectOnce } from './useEffectOnce.js';
+export { default as useEnsuredForwardedRef, ensuredForwardRef } from './useEnsuredForwardedRef.js';
+export { default as useEvent } from './useEvent.js';
+export { default as useError } from './useError.js';
+export { default as useFavicon } from './useFavicon.js';
+export { default as useFullscreen } from './useFullscreen.js';
+export { default as useGeolocation } from './useGeolocation.js';
+export { default as useGetSet } from './useGetSet.js';
+export { default as useGetSetState } from './useGetSetState.js';
+export { default as useHarmonicIntervalFn } from './useHarmonicIntervalFn.js';
+export { default as useHover } from './useHover.js';
+export { default as useHoverDirty } from './useHoverDirty.js';
+export { default as useIdle } from './useIdle.js';
+export { default as useIntersection } from './useIntersection.js';
+export { default as useInterval } from './useInterval.js';
+export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+export { default as useKey } from './useKey.js';
+export { default as createBreakpoint } from './factory/createBreakpoint.js';
 // not exported because of peer dependency
-// export { default as useKeyboardJs } from './useKeyboardJs';
-export { default as useKeyPress } from './useKeyPress';
-export { default as useKeyPressEvent } from './useKeyPressEvent';
-export { default as useLatest } from './useLatest';
-export { default as useLifecycles } from './useLifecycles';
-export { default as useList } from './useList';
-export { default as useLocalStorage } from './useLocalStorage';
-export { default as useLocation } from './useLocation';
-export { default as useLockBodyScroll } from './useLockBodyScroll';
-export { default as useLogger } from './useLogger';
-export { default as useLongPress } from './useLongPress';
-export { default as useMap } from './useMap';
-export { default as useMedia } from './useMedia';
-export { default as useMediaDevices } from './useMediaDevices';
-export { useMediatedState } from './useMediatedState';
-export { default as useMethods } from './useMethods';
-export { default as useMotion } from './useMotion';
-export { default as useMount } from './useMount';
-export { default as useMountedState } from './useMountedState';
-export { default as useMouse } from './useMouse';
-export { default as useMouseHovered } from './useMouseHovered';
-export { default as useMouseWheel } from './useMouseWheel';
-export { default as useNetworkState } from './useNetworkState';
-export { default as useNumber } from './useNumber';
-export { default as useObservable } from './useObservable';
-export { default as useOrientation } from './useOrientation';
-export { default as usePageLeave } from './usePageLeave';
-export { default as usePermission } from './usePermission';
-export { default as usePrevious } from './usePrevious';
-export { default as usePreviousDistinct } from './usePreviousDistinct';
-export { default as usePromise } from './usePromise';
-export { default as useQueue } from './useQueue';
-export { default as useRaf } from './useRaf';
-export { default as useRafLoop } from './useRafLoop';
-export { default as useRafState } from './useRafState';
-export { default as useSearchParam } from './useSearchParam';
-export { default as useScratch } from './useScratch';
-export { default as useScroll } from './useScroll';
-export { default as useScrolling } from './useScrolling';
-export { default as useSessionStorage } from './useSessionStorage';
-export { default as useSetState } from './useSetState';
-export { default as useShallowCompareEffect } from './useShallowCompareEffect';
-export { default as useSize } from './useSize';
-export { default as useSlider } from './useSlider';
-export { default as useSpeech } from './useSpeech';
+// export { default as useKeyboardJs } from './useKeyboardJs.js';
+export { default as useKeyPress } from './useKeyPress.js';
+export { default as useKeyPressEvent } from './useKeyPressEvent.js';
+export { default as useLatest } from './useLatest.js';
+export { default as useLifecycles } from './useLifecycles.js';
+export { default as useList } from './useList.js';
+export { default as useLocalStorage } from './useLocalStorage.js';
+export { default as useLocation } from './useLocation.js';
+export { default as useLockBodyScroll } from './useLockBodyScroll.js';
+export { default as useLogger } from './useLogger.js';
+export { default as useLongPress } from './useLongPress.js';
+export { default as useMap } from './useMap.js';
+export { default as useMedia } from './useMedia.js';
+export { default as useMediaDevices } from './useMediaDevices.js';
+export { useMediatedState } from './useMediatedState.js';
+export { default as useMethods } from './useMethods.js';
+export { default as useMotion } from './useMotion.js';
+export { default as useMount } from './useMount.js';
+export { default as useMountedState } from './useMountedState.js';
+export { default as useMouse } from './useMouse.js';
+export { default as useMouseHovered } from './useMouseHovered.js';
+export { default as useMouseWheel } from './useMouseWheel.js';
+export { default as useNetworkState } from './useNetworkState.js';
+export { default as useNumber } from './useNumber.js';
+export { default as useObservable } from './useObservable.js';
+export { default as useOrientation } from './useOrientation.js';
+export { default as usePageLeave } from './usePageLeave.js';
+export { default as usePermission } from './usePermission.js';
+export { default as usePrevious } from './usePrevious.js';
+export { default as usePreviousDistinct } from './usePreviousDistinct.js';
+export { default as usePromise } from './usePromise.js';
+export { default as useQueue } from './useQueue.js';
+export { default as useRaf } from './useRaf.js';
+export { default as useRafLoop } from './useRafLoop.js';
+export { default as useRafState } from './useRafState.js';
+export { default as useSearchParam } from './useSearchParam.js';
+export { default as useScratch } from './useScratch.js';
+export { default as useScroll } from './useScroll.js';
+export { default as useScrolling } from './useScrolling.js';
+export { default as useSessionStorage } from './useSessionStorage.js';
+export { default as useSetState } from './useSetState.js';
+export { default as useShallowCompareEffect } from './useShallowCompareEffect.js';
+export { default as useSize } from './useSize.js';
+export { default as useSlider } from './useSlider.js';
+export { default as useSpeech } from './useSpeech.js';
 // not exported because of peer dependency
-// export { default as useSpring } from './useSpring';
-export { default as useStartTyping } from './useStartTyping';
-export { useStateWithHistory } from './useStateWithHistory';
-export { default as useStateList } from './useStateList';
-export { default as useThrottle } from './useThrottle';
-export { default as useThrottleFn } from './useThrottleFn';
-export { default as useTimeout } from './useTimeout';
-export { default as useTimeoutFn } from './useTimeoutFn';
-export { default as useTitle } from './useTitle';
-export { default as useToggle } from './useToggle';
-export { default as useTween } from './useTween';
-export { default as useUnmount } from './useUnmount';
-export { default as useUnmountPromise } from './useUnmountPromise';
-export { default as useUpdate } from './useUpdate';
-export { default as useUpdateEffect } from './useUpdateEffect';
-export { default as useUpsert } from './useUpsert';
-export { default as useVibrate } from './useVibrate';
-export { default as useVideo } from './useVideo';
-export { default as useStateValidator } from './useStateValidator';
-export { useScrollbarWidth } from './useScrollbarWidth';
-export { useMultiStateValidator } from './useMultiStateValidator';
-export { default as useWindowScroll } from './useWindowScroll';
-export { default as useWindowSize } from './useWindowSize';
-export { default as useMeasure } from './useMeasure';
-export { default as usePinchZoom } from './usePinchZoom';
-export { useRendersCount } from './useRendersCount';
-export { useFirstMountState } from './useFirstMountState';
-export { default as useSet } from './useSet';
-export { createGlobalState } from './factory/createGlobalState';
-export { useHash } from './useHash';
+// export { default as useSpring } from './useSpring.js';
+export { default as useStartTyping } from './useStartTyping.js';
+export { useStateWithHistory } from './useStateWithHistory.js';
+export { default as useStateList } from './useStateList.js';
+export { default as useThrottle } from './useThrottle.js';
+export { default as useThrottleFn } from './useThrottleFn.js';
+export { default as useTimeout } from './useTimeout.js';
+export { default as useTimeoutFn } from './useTimeoutFn.js';
+export { default as useTitle } from './useTitle.js';
+export { default as useToggle } from './useToggle.js';
+export { default as useTween } from './useTween.js';
+export { default as useUnmount } from './useUnmount.js';
+export { default as useUnmountPromise } from './useUnmountPromise.js';
+export { default as useUpdate } from './useUpdate.js';
+export { default as useUpdateEffect } from './useUpdateEffect.js';
+export { default as useUpsert } from './useUpsert.js';
+export { default as useVibrate } from './useVibrate.js';
+export { default as useVideo } from './useVideo.js';
+export { default as useStateValidator } from './useStateValidator.js';
+export { useScrollbarWidth } from './useScrollbarWidth.js';
+export { useMultiStateValidator } from './useMultiStateValidator.js';
+export { default as useWindowScroll } from './useWindowScroll.js';
+export { default as useWindowSize } from './useWindowSize.js';
+export { default as useMeasure } from './useMeasure.js';
+export { default as usePinchZoom } from './usePinchZoom.js';
+export { useRendersCount } from './useRendersCount.js';
+export { useFirstMountState } from './useFirstMountState.js';
+export { default as useSet } from './useSet.js';
+export { createGlobalState } from './factory/createGlobalState.js';
+export { useHash } from './useHash.js';
diff --git a/src/useAsync.ts b/src/useAsync.ts
index f30c85caa9..4ecec79e6f 100644
--- a/src/useAsync.ts
+++ b/src/useAsync.ts
@@ -1,8 +1,8 @@
 import { DependencyList, useEffect } from 'react';
-import useAsyncFn from './useAsyncFn';
-import { FunctionReturningPromise } from './misc/types';
+import useAsyncFn from './useAsyncFn.js';
+import { FunctionReturningPromise } from './misc/types.js';
 
-export { AsyncState, AsyncFnReturn } from './useAsyncFn';
+export { AsyncState, AsyncFnReturn } from './useAsyncFn.js';
 
 export default function useAsync<T extends FunctionReturningPromise>(
   fn: T,
diff --git a/src/useAsyncFn.ts b/src/useAsyncFn.ts
index d330ffbadc..335f1d5aca 100644
--- a/src/useAsyncFn.ts
+++ b/src/useAsyncFn.ts
@@ -1,6 +1,6 @@
 import { DependencyList, useCallback, useRef, useState } from 'react';
-import useMountedState from './useMountedState';
-import { FunctionReturningPromise, PromiseType } from './misc/types';
+import useMountedState from './useMountedState.js';
+import { FunctionReturningPromise, PromiseType } from './misc/types.js';
 
 export type AsyncState<T> =
   | {
diff --git a/src/useAsyncRetry.ts b/src/useAsyncRetry.ts
index 04119d957f..ecc5d1ed3d 100644
--- a/src/useAsyncRetry.ts
+++ b/src/useAsyncRetry.ts
@@ -1,5 +1,5 @@
 import { DependencyList, useCallback, useState } from 'react';
-import useAsync, { AsyncState } from './useAsync';
+import useAsync, { AsyncState } from './useAsync.js';
 
 export type AsyncStateRetry<T> = AsyncState<T> & {
   retry(): void;
diff --git a/src/useAudio.ts b/src/useAudio.ts
index 8861d93933..afe115589e 100644
--- a/src/useAudio.ts
+++ b/src/useAudio.ts
@@ -1,4 +1,4 @@
-import createHTMLMediaHook from './factory/createHTMLMediaHook';
+import createHTMLMediaHook from './factory/createHTMLMediaHook.js';
 
 const useAudio = createHTMLMediaHook<HTMLAudioElement>('audio');
 export default useAudio;
diff --git a/src/useBattery.ts b/src/useBattery.ts
index 80d118ac74..a5d0851edf 100644
--- a/src/useBattery.ts
+++ b/src/useBattery.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { isNavigator, off, on } from './misc/util';
-import isDeepEqual from './misc/isDeepEqual';
+import { isNavigator, off, on } from './misc/util.js';
+import isDeepEqual from './misc/isDeepEqual.js';
 
 export interface BatteryState {
   charging: boolean;
diff --git a/src/useBeforeUnload.ts b/src/useBeforeUnload.ts
index 4d12e77aa6..06da26ac92 100644
--- a/src/useBeforeUnload.ts
+++ b/src/useBeforeUnload.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const useBeforeUnload = (enabled: boolean | (() => boolean) = true, message?: string) => {
   const handler = useCallback(
diff --git a/src/useBoolean.ts b/src/useBoolean.ts
index 39edec07e5..4cb6aee5f5 100644
--- a/src/useBoolean.ts
+++ b/src/useBoolean.ts
@@ -1,3 +1,3 @@
-import useBoolean from './useToggle';
+import useBoolean from './useToggle.js';
 
 export default useBoolean;
diff --git a/src/useClickAway.ts b/src/useClickAway.ts
index e5367d0f8d..dec801e820 100644
--- a/src/useClickAway.ts
+++ b/src/useClickAway.ts
@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useRef } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const defaultEvents = ['mousedown', 'touchstart'];
 
diff --git a/src/useCopyToClipboard.ts b/src/useCopyToClipboard.ts
index 9656d9efd7..c10e7a1ffb 100644
--- a/src/useCopyToClipboard.ts
+++ b/src/useCopyToClipboard.ts
@@ -1,7 +1,7 @@
 import writeText from 'copy-to-clipboard';
 import { useCallback } from 'react';
-import useMountedState from './useMountedState';
-import useSetState from './useSetState';
+import useMountedState from './useMountedState.js';
+import useSetState from './useSetState.js';
 
 export interface CopyToClipboardState {
   value?: string;
diff --git a/src/useCounter.ts b/src/useCounter.ts
index cb4a3b830a..ec22413f56 100644
--- a/src/useCounter.ts
+++ b/src/useCounter.ts
@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
-import useGetSet from './useGetSet';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
+import useGetSet from './useGetSet.js';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState.js';
 
 export interface CounterActions {
   inc: (delta?: number) => void;
diff --git a/src/useCss.ts b/src/useCss.ts
index 5617fe3f97..31353f2498 100644
--- a/src/useCss.ts
+++ b/src/useCss.ts
@@ -3,7 +3,7 @@ import { addon as addonCSSOM, CSSOMAddon } from 'nano-css/addon/cssom';
 import { addon as addonVCSSOM, VCSSOMAddon } from 'nano-css/addon/vcssom';
 import { cssToTree } from 'nano-css/addon/vcssom/cssToTree';
 import { useMemo } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
 
 type Nano = NanoRenderer & CSSOMAddon & VCSSOMAddon;
 const nano = create() as Nano;
diff --git a/src/useDebounce.ts b/src/useDebounce.ts
index 70956d82a1..68f40898ec 100644
--- a/src/useDebounce.ts
+++ b/src/useDebounce.ts
@@ -1,5 +1,5 @@
 import { DependencyList, useEffect } from 'react';
-import useTimeoutFn from './useTimeoutFn';
+import useTimeoutFn from './useTimeoutFn.js';
 
 export type UseDebounceReturn = [() => boolean | null, () => void];
 
diff --git a/src/useDeepCompareEffect.ts b/src/useDeepCompareEffect.ts
index 14c08c4ff0..921d67bdbe 100644
--- a/src/useDeepCompareEffect.ts
+++ b/src/useDeepCompareEffect.ts
@@ -1,6 +1,6 @@
 import { DependencyList, EffectCallback } from 'react';
-import useCustomCompareEffect from './useCustomCompareEffect';
-import isDeepEqual from './misc/isDeepEqual';
+import useCustomCompareEffect from './useCustomCompareEffect.js';
+import isDeepEqual from './misc/isDeepEqual.js';
 
 const isPrimitive = (val: any) => val !== Object(val);
 
diff --git a/src/useDrop.ts b/src/useDrop.ts
index c4c353a9f1..78c1e1fed4 100644
--- a/src/useDrop.ts
+++ b/src/useDrop.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { noop, off, on } from './misc/util';
+import { noop, off, on } from './misc/util.js';
 
 export interface DropAreaState {
   over: boolean;
diff --git a/src/useDropArea.ts b/src/useDropArea.ts
index 52ca8fae62..396d19be3b 100644
--- a/src/useDropArea.ts
+++ b/src/useDropArea.ts
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
-import useMountedState from './useMountedState';
-import { noop } from './misc/util';
+import useMountedState from './useMountedState.js';
+import { noop } from './misc/util.js';
 
 export interface DropAreaState {
   over: boolean;
diff --git a/src/useEvent.ts b/src/useEvent.ts
index c0a1673051..34b9489cfd 100644
--- a/src/useEvent.ts
+++ b/src/useEvent.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { isBrowser, off, on } from './misc/util';
+import { isBrowser, off, on } from './misc/util.js';
 
 export interface ListenerType1 {
   addEventListener(name: string, handler: (event?: any) => void, ...args: any[]);
diff --git a/src/useFullscreen.ts b/src/useFullscreen.ts
index f795bb3b14..7c2a4f4031 100644
--- a/src/useFullscreen.ts
+++ b/src/useFullscreen.ts
@@ -1,7 +1,7 @@
 import { RefObject, useState } from 'react';
 import screenfull from 'screenfull';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
-import { noop, off, on } from './misc/util';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
+import { noop, off, on } from './misc/util.js';
 
 export interface FullScreenOptions {
   video?: RefObject<
diff --git a/src/useGetSet.ts b/src/useGetSet.ts
index 56a6b99af1..b379e80701 100644
--- a/src/useGetSet.ts
+++ b/src/useGetSet.ts
@@ -1,6 +1,6 @@
 import { Dispatch, useMemo, useRef } from 'react';
-import useUpdate from './useUpdate';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
+import useUpdate from './useUpdate.js';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState.js';
 
 export default function useGetSet<S>(
   initialState: IHookStateInitAction<S>
diff --git a/src/useGetSetState.ts b/src/useGetSetState.ts
index 061c178b7e..70f930d1e9 100644
--- a/src/useGetSetState.ts
+++ b/src/useGetSetState.ts
@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react';
-import useUpdate from './useUpdate';
+import useUpdate from './useUpdate.js';
 
 const useGetSetState = <T extends object>(
   initialState: T = {} as T
diff --git a/src/useHash.ts b/src/useHash.ts
index 6d936d333a..a5f9a2c461 100644
--- a/src/useHash.ts
+++ b/src/useHash.ts
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
-import useLifecycles from './useLifecycles';
-import { off, on } from './misc/util';
+import useLifecycles from './useLifecycles.js';
+import { off, on } from './misc/util.js';
 
 /**
  * read and write url hash, response to url hash change
diff --git a/src/useHover.ts b/src/useHover.ts
index 98b5908a8d..41287a1411 100644
--- a/src/useHover.ts
+++ b/src/useHover.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { noop } from './misc/util';
+import { noop } from './misc/util.js';
 
 const { useState } = React;
 
diff --git a/src/useHoverDirty.ts b/src/useHoverDirty.ts
index 4f983a489a..0e34877041 100644
--- a/src/useHoverDirty.ts
+++ b/src/useHoverDirty.ts
@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 // kudos: https://usehooks.com/
 const useHoverDirty = (ref: RefObject<Element>, enabled: boolean = true) => {
diff --git a/src/useIdle.ts b/src/useIdle.ts
index e5eb9a152f..2147733748 100644
--- a/src/useIdle.ts
+++ b/src/useIdle.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { throttle } from 'throttle-debounce';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const defaultEvents = ['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel'];
 const oneMinute = 60e3;
diff --git a/src/useIsomorphicLayoutEffect.ts b/src/useIsomorphicLayoutEffect.ts
index 71f7c3423a..8550851e6a 100644
--- a/src/useIsomorphicLayoutEffect.ts
+++ b/src/useIsomorphicLayoutEffect.ts
@@ -1,5 +1,5 @@
 import { useEffect, useLayoutEffect } from 'react';
-import { isBrowser } from './misc/util';
+import { isBrowser } from './misc/util.js';
 
 const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 
diff --git a/src/useKey.ts b/src/useKey.ts
index 03f403bf24..1f866e4f6a 100644
--- a/src/useKey.ts
+++ b/src/useKey.ts
@@ -1,6 +1,6 @@
 import { DependencyList, useMemo } from 'react';
-import useEvent, { UseEventOptions, UseEventTarget } from './useEvent';
-import { noop } from './misc/util';
+import useEvent, { UseEventOptions, UseEventTarget } from './useEvent.js';
+import { noop } from './misc/util.js';
 
 export type KeyPredicate = (event: KeyboardEvent) => boolean;
 export type KeyFilter = null | undefined | string | ((event: KeyboardEvent) => boolean);
diff --git a/src/useKeyPress.ts b/src/useKeyPress.ts
index 2f48e0fb31..bcf2a343f8 100644
--- a/src/useKeyPress.ts
+++ b/src/useKeyPress.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import useKey, { KeyFilter } from './useKey';
+import useKey, { KeyFilter } from './useKey.js';
 
 const useKeyPress = (keyFilter: KeyFilter) => {
   const [state, set] = useState<[boolean, null | KeyboardEvent]>([false, null]);
diff --git a/src/useKeyPressEvent.ts b/src/useKeyPressEvent.ts
index 9b694b6077..073aa1e984 100644
--- a/src/useKeyPressEvent.ts
+++ b/src/useKeyPressEvent.ts
@@ -1,6 +1,6 @@
-import { Handler, KeyFilter } from './useKey';
-import useKeyPressDefault from './useKeyPress';
-import useUpdateEffect from './useUpdateEffect';
+import { Handler, KeyFilter } from './useKey.js';
+import useKeyPressDefault from './useKeyPress.js';
+import useUpdateEffect from './useUpdateEffect.js';
 
 const useKeyPressEvent = (
   key: string | KeyFilter,
diff --git a/src/useKeyboardJs.ts b/src/useKeyboardJs.ts
index bdf13564e0..d16786ee56 100644
--- a/src/useKeyboardJs.ts
+++ b/src/useKeyboardJs.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import useMount from './useMount';
+import useMount from './useMount.js';
 
 const useKeyboardJs = (combination: string | string[]) => {
   const [state, set] = useState<[boolean, null | KeyboardEvent]>([false, null]);
diff --git a/src/useList.ts b/src/useList.ts
index dd592df30d..1b00655380 100644
--- a/src/useList.ts
+++ b/src/useList.ts
@@ -1,6 +1,6 @@
 import { useMemo, useRef } from 'react';
-import useUpdate from './useUpdate';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
+import useUpdate from './useUpdate.js';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState.js';
 
 export interface ListActions<T> {
   /**
diff --git a/src/useLocalStorage.ts b/src/useLocalStorage.ts
index def6ad804a..b2c02cc618 100644
--- a/src/useLocalStorage.ts
+++ b/src/useLocalStorage.ts
@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction, useCallback, useState, useRef, useLayoutEffect } from 'react';
-import { isBrowser, noop } from './misc/util';
+import { isBrowser, noop } from './misc/util.js';
 
 type parserOptions<T> =
   | {
diff --git a/src/useLocation.ts b/src/useLocation.ts
index bffdca20b0..b87a9c90b2 100644
--- a/src/useLocation.ts
+++ b/src/useLocation.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isBrowser, off, on } from './misc/util';
+import { isBrowser, off, on } from './misc/util.js';
 
 const patchHistoryMethod = (method) => {
   const history = window.history;
diff --git a/src/useLockBodyScroll.ts b/src/useLockBodyScroll.ts
index fd48658917..aa2163dc3d 100644
--- a/src/useLockBodyScroll.ts
+++ b/src/useLockBodyScroll.ts
@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useRef } from 'react';
-import { isBrowser, off, on } from './misc/util';
+import { isBrowser, off, on } from './misc/util.js';
 
 export function getClosestBody(
   el: Element | HTMLElement | HTMLIFrameElement | null
diff --git a/src/useLogger.ts b/src/useLogger.ts
index 6ae5a8c5f8..892aa2aa38 100644
--- a/src/useLogger.ts
+++ b/src/useLogger.ts
@@ -1,5 +1,5 @@
-import useEffectOnce from './useEffectOnce';
-import useUpdateEffect from './useUpdateEffect';
+import useEffectOnce from './useEffectOnce.js';
+import useUpdateEffect from './useUpdateEffect.js';
 
 const useLogger = (componentName: string, ...rest) => {
   useEffectOnce(() => {
diff --git a/src/useLongPress.ts b/src/useLongPress.ts
index a885e091f5..660d3d112f 100644
--- a/src/useLongPress.ts
+++ b/src/useLongPress.ts
@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 interface Options {
   isPreventDefault?: boolean;
diff --git a/src/useMeasure.ts b/src/useMeasure.ts
index e14f217f1c..fa7e3f178e 100644
--- a/src/useMeasure.ts
+++ b/src/useMeasure.ts
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
-import { isBrowser, noop } from './misc/util';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
+import { isBrowser, noop } from './misc/util.js';
 
 export type UseMeasureRect = Pick<
   DOMRectReadOnly,
diff --git a/src/useMedia.ts b/src/useMedia.ts
index c0f3d96281..e9526358ba 100644
--- a/src/useMedia.ts
+++ b/src/useMedia.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isBrowser } from './misc/util';
+import { isBrowser } from './misc/util.js';
 
 const getInitialState = (query: string, defaultState?: boolean) => {
   // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
diff --git a/src/useMediaDevices.ts b/src/useMediaDevices.ts
index 50dc53b297..7358f414de 100644
--- a/src/useMediaDevices.ts
+++ b/src/useMediaDevices.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isNavigator, noop, off, on } from './misc/util';
+import { isNavigator, noop, off, on } from './misc/util.js';
 
 const useMediaDevices = () => {
   const [state, setState] = useState({});
diff --git a/src/useMotion.ts b/src/useMotion.ts
index cb3d867c44..6e9d117b41 100644
--- a/src/useMotion.ts
+++ b/src/useMotion.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 export interface MotionSensorState {
   acceleration: {
diff --git a/src/useMount.ts b/src/useMount.ts
index 90d09011cf..d392ecbdb8 100644
--- a/src/useMount.ts
+++ b/src/useMount.ts
@@ -1,4 +1,4 @@
-import useEffectOnce from './useEffectOnce';
+import useEffectOnce from './useEffectOnce.js';
 
 const useMount = (fn: () => void) => {
   useEffectOnce(() => {
diff --git a/src/useMouse.ts b/src/useMouse.ts
index cbebbba4ef..620e062a04 100644
--- a/src/useMouse.ts
+++ b/src/useMouse.ts
@@ -1,7 +1,7 @@
 import { RefObject, useEffect } from 'react';
 
-import useRafState from './useRafState';
-import { off, on } from './misc/util';
+import useRafState from './useRafState.js';
+import { off, on } from './misc/util.js';
 
 export interface State {
   docX: number;
diff --git a/src/useMouseHovered.ts b/src/useMouseHovered.ts
index de736afa85..383f6160a9 100644
--- a/src/useMouseHovered.ts
+++ b/src/useMouseHovered.ts
@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
-import useHoverDirty from './useHoverDirty';
-import useMouse, { State } from './useMouse';
+import useHoverDirty from './useHoverDirty.js';
+import useMouse, { State } from './useMouse.js';
 
 export interface UseMouseHoveredOptions {
   whenHovered?: boolean;
diff --git a/src/useMouseWheel.ts b/src/useMouseWheel.ts
index 31638f392f..a1ec0f8384 100644
--- a/src/useMouseWheel.ts
+++ b/src/useMouseWheel.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 export default () => {
   const [mouseWheelScrolled, setMouseWheelScrolled] = useState(0);
diff --git a/src/useMultiStateValidator.ts b/src/useMultiStateValidator.ts
index 5b01768686..09dfc81976 100644
--- a/src/useMultiStateValidator.ts
+++ b/src/useMultiStateValidator.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { StateValidator, UseStateValidatorReturn, ValidityState } from './useStateValidator';
+import { StateValidator, UseStateValidatorReturn, ValidityState } from './useStateValidator.js';
 
 export type MultiStateValidatorStates = any[] | { [p: string]: any } | { [p: number]: any };
 export type MultiStateValidator<V extends ValidityState, S extends MultiStateValidatorStates> =
diff --git a/src/useNetworkState.ts b/src/useNetworkState.ts
index 0d48439d19..61ce584189 100644
--- a/src/useNetworkState.ts
+++ b/src/useNetworkState.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { isNavigator, off, on } from './misc/util';
-import { IHookStateInitAction } from './misc/hookState';
+import { isNavigator, off, on } from './misc/util.js';
+import { IHookStateInitAction } from './misc/hookState.js';
 
 export interface INetworkInformation extends EventTarget {
   readonly downlink: number;
diff --git a/src/useNumber.ts b/src/useNumber.ts
index 79393d5f83..877e80fdf1 100644
--- a/src/useNumber.ts
+++ b/src/useNumber.ts
@@ -1,3 +1,3 @@
-import useNumber from './useCounter';
+import useNumber from './useCounter.js';
 
 export default useNumber;
diff --git a/src/useObservable.ts b/src/useObservable.ts
index dfe64d67dc..9ceba9f949 100644
--- a/src/useObservable.ts
+++ b/src/useObservable.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
 
 export interface Observable<T> {
   subscribe: (listener: (value: T) => void) => {
diff --git a/src/useOrientation.ts b/src/useOrientation.ts
index b5365af90f..f65e354e18 100644
--- a/src/useOrientation.ts
+++ b/src/useOrientation.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 export interface OrientationState {
   angle: number;
diff --git a/src/usePageLeave.ts b/src/usePageLeave.ts
index 5a41e92ebc..62bfcca293 100644
--- a/src/usePageLeave.ts
+++ b/src/usePageLeave.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const usePageLeave = (onPageLeave, args = []) => {
   useEffect(() => {
diff --git a/src/usePermission.ts b/src/usePermission.ts
index 0aae85f55c..ba116d5f95 100644
--- a/src/usePermission.ts
+++ b/src/usePermission.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { noop, off, on } from './misc/util';
+import { noop, off, on } from './misc/util.js';
 
 export type IState = PermissionState | '';
 
diff --git a/src/usePreviousDistinct.ts b/src/usePreviousDistinct.ts
index 10bf5f8293..0c3e39798f 100644
--- a/src/usePreviousDistinct.ts
+++ b/src/usePreviousDistinct.ts
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useFirstMountState } from './useFirstMountState';
+import { useFirstMountState } from './useFirstMountState.js';
 
 export type Predicate<T> = (prev: T | undefined, next: T) => boolean;
 
diff --git a/src/usePromise.ts b/src/usePromise.ts
index ede5732cae..0cb018412f 100644
--- a/src/usePromise.ts
+++ b/src/usePromise.ts
@@ -1,5 +1,5 @@
 import { useCallback } from 'react';
-import useMountedState from './useMountedState';
+import useMountedState from './useMountedState.js';
 
 export type UsePromise = () => <T>(promise: Promise<T>) => Promise<T>;
 
diff --git a/src/useRaf.ts b/src/useRaf.ts
index 7ad5ef2613..c64eb9a606 100644
--- a/src/useRaf.ts
+++ b/src/useRaf.ts
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
 
 const useRaf = (ms: number = 1e12, delay: number = 0): number => {
   const [elapsed, set] = useState<number>(0);
diff --git a/src/useRafState.ts b/src/useRafState.ts
index c42c5362d1..cd8c2af1a0 100644
--- a/src/useRafState.ts
+++ b/src/useRafState.ts
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useRef, useState } from 'react';
 
-import useUnmount from './useUnmount';
+import useUnmount from './useUnmount.js';
 
 const useRafState = <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>] => {
   const frame = useRef(0);
diff --git a/src/useScratch.ts b/src/useScratch.ts
index 68b793f85c..7df64eb2a9 100644
--- a/src/useScratch.ts
+++ b/src/useScratch.ts
@@ -1,7 +1,7 @@
 import { cloneElement, FC, useEffect, useRef, useState } from 'react';
 import { render } from 'react-universal-interface';
-import useLatest from './useLatest';
-import { noop, off, on } from './misc/util';
+import useLatest from './useLatest.js';
+import { noop, off, on } from './misc/util.js';
 
 export interface ScratchSensorParams {
   disabled?: boolean;
diff --git a/src/useScroll.ts b/src/useScroll.ts
index 3b8dab2174..03f55d1197 100644
--- a/src/useScroll.ts
+++ b/src/useScroll.ts
@@ -1,7 +1,7 @@
 import { RefObject, useEffect } from 'react';
 
-import useRafState from './useRafState';
-import { off, on } from './misc/util';
+import useRafState from './useRafState.js';
+import { off, on } from './misc/util.js';
 
 export interface State {
   x: number;
diff --git a/src/useScrolling.ts b/src/useScrolling.ts
index 2e2ddbef9a..4054c65331 100644
--- a/src/useScrolling.ts
+++ b/src/useScrolling.ts
@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useState } from 'react';
-import { off, on } from './misc/util';
+import { off, on } from './misc/util.js';
 
 const useScrolling = (ref: RefObject<HTMLElement>): boolean => {
   const [scrolling, setScrolling] = useState<boolean>(false);
diff --git a/src/useSearchParam.ts b/src/useSearchParam.ts
index 64440d200e..0a0dc6fabc 100644
--- a/src/useSearchParam.ts
+++ b/src/useSearchParam.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isBrowser, off, on } from './misc/util';
+import { isBrowser, off, on } from './misc/util.js';
 
 const getValue = (search: string, param: string) => new URLSearchParams(search).get(param);
 
diff --git a/src/useSessionStorage.ts b/src/useSessionStorage.ts
index 67e97c8814..b51d06adba 100644
--- a/src/useSessionStorage.ts
+++ b/src/useSessionStorage.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { isBrowser } from './misc/util';
+import { isBrowser } from './misc/util.js';
 
 const useSessionStorage = <T>(
   key: string,
diff --git a/src/useShallowCompareEffect.ts b/src/useShallowCompareEffect.ts
index 2c6e4808c9..2909d3b747 100644
--- a/src/useShallowCompareEffect.ts
+++ b/src/useShallowCompareEffect.ts
@@ -1,6 +1,6 @@
 import { DependencyList, EffectCallback } from 'react';
 import { equal as isShallowEqual } from 'fast-shallow-equal';
-import useCustomCompareEffect from './useCustomCompareEffect';
+import useCustomCompareEffect from './useCustomCompareEffect.js';
 
 const isPrimitive = (val: any) => val !== Object(val);
 const shallowEqualDepsList = (prevDeps: DependencyList, nextDeps: DependencyList) =>
diff --git a/src/useSize.tsx b/src/useSize.tsx
index 4c6271fe59..c23bf9b30d 100644
--- a/src/useSize.tsx
+++ b/src/useSize.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isBrowser, off, on } from './misc/util';
+import { isBrowser, off, on } from './misc/util.js';
 
 const { useState, useEffect, useRef } = React;
 
diff --git a/src/useSlider.ts b/src/useSlider.ts
index b7826827e8..b5e1c69eea 100644
--- a/src/useSlider.ts
+++ b/src/useSlider.ts
@@ -1,7 +1,7 @@
 import { CSSProperties, RefObject, useEffect, useRef } from 'react';
-import { isBrowser, noop, off, on } from './misc/util';
-import useMountedState from './useMountedState';
-import useSetState from './useSetState';
+import { isBrowser, noop, off, on } from './misc/util.js';
+import useMountedState from './useMountedState.js';
+import useSetState from './useSetState.js';
 
 export interface State {
   isSliding: boolean;
diff --git a/src/useStartTyping.ts b/src/useStartTyping.ts
index 1e04f63d6f..c36904d318 100644
--- a/src/useStartTyping.ts
+++ b/src/useStartTyping.ts
@@ -1,5 +1,5 @@
-import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect';
-import { off, on } from './misc/util';
+import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect.js';
+import { off, on } from './misc/util.js';
 
 const isFocusedElementEditable = () => {
   const { activeElement, body } = document;
diff --git a/src/useStateList.ts b/src/useStateList.ts
index 748e317c8a..127ce169a3 100644
--- a/src/useStateList.ts
+++ b/src/useStateList.ts
@@ -1,7 +1,7 @@
 import { useMemo, useRef } from 'react';
-import useMountedState from './useMountedState';
-import useUpdate from './useUpdate';
-import useUpdateEffect from './useUpdateEffect';
+import useMountedState from './useMountedState.js';
+import useUpdate from './useUpdate.js';
+import useUpdateEffect from './useUpdateEffect.js';
 
 export interface UseStateListReturn<T> {
   state: T;
diff --git a/src/useStateWithHistory.ts b/src/useStateWithHistory.ts
index 7e2b442cbf..87cc87a595 100644
--- a/src/useStateWithHistory.ts
+++ b/src/useStateWithHistory.ts
@@ -1,6 +1,6 @@
 import { Dispatch, useCallback, useMemo, useRef, useState } from 'react';
-import { useFirstMountState } from './useFirstMountState';
-import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState';
+import { useFirstMountState } from './useFirstMountState.js';
+import { IHookStateInitAction, IHookStateSetAction, resolveHookState } from './misc/hookState.js';
 
 interface HistoryState<S> {
   history: S[];
diff --git a/src/useThrottle.ts b/src/useThrottle.ts
index b231ba626d..24aedf1da6 100644
--- a/src/useThrottle.ts
+++ b/src/useThrottle.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import useUnmount from './useUnmount';
+import useUnmount from './useUnmount.js';
 
 const useThrottle = <T>(value: T, ms: number = 200) => {
   const [state, setState] = useState<T>(value);
diff --git a/src/useThrottleFn.ts b/src/useThrottleFn.ts
index 7b197a1f41..4362a4ec78 100644
--- a/src/useThrottleFn.ts
+++ b/src/useThrottleFn.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import useUnmount from './useUnmount';
+import useUnmount from './useUnmount.js';
 
 const useThrottleFn = <T, U extends any[]>(fn: (...args: U) => T, ms: number = 200, args: U) => {
   const [state, setState] = useState<T | null>(null);
diff --git a/src/useTimeout.ts b/src/useTimeout.ts
index 387a7c768d..cc38d0a74e 100644
--- a/src/useTimeout.ts
+++ b/src/useTimeout.ts
@@ -1,5 +1,5 @@
-import useTimeoutFn from './useTimeoutFn';
-import useUpdate from './useUpdate';
+import useTimeoutFn from './useTimeoutFn.js';
+import useUpdate from './useUpdate.js';
 
 export type UseTimeoutReturn = [() => boolean | null, () => void, () => void];
 
diff --git a/src/useTween.ts b/src/useTween.ts
index 8066260bbb..705ef32d8b 100644
--- a/src/useTween.ts
+++ b/src/useTween.ts
@@ -1,5 +1,5 @@
 import { easing } from 'ts-easing';
-import useRaf from './useRaf';
+import useRaf from './useRaf.js';
 
 export type Easing = (t: number) => number;
 
diff --git a/src/useUnmount.ts b/src/useUnmount.ts
index 2bd460e959..999f7bd7a1 100644
--- a/src/useUnmount.ts
+++ b/src/useUnmount.ts
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import useEffectOnce from './useEffectOnce';
+import useEffectOnce from './useEffectOnce.js';
 
 const useUnmount = (fn: () => any): void => {
   const fnRef = useRef(fn);
diff --git a/src/useUnmountPromise.ts b/src/useUnmountPromise.ts
index 7a2f09654c..f4c60f8af2 100644
--- a/src/useUnmountPromise.ts
+++ b/src/useUnmountPromise.ts
@@ -1,5 +1,5 @@
 import { useMemo, useRef } from 'react';
-import useEffectOnce from './useEffectOnce';
+import useEffectOnce from './useEffectOnce.js';
 
 export type Race = <P extends Promise<any>, E = any>(promise: P, onError?: (error: E) => void) => P;
 
diff --git a/src/useUpdateEffect.ts b/src/useUpdateEffect.ts
index 736abf8c0c..7a51a876c0 100644
--- a/src/useUpdateEffect.ts
+++ b/src/useUpdateEffect.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { useFirstMountState } from './useFirstMountState';
+import { useFirstMountState } from './useFirstMountState.js';
 
 const useUpdateEffect: typeof useEffect = (effect, deps) => {
   const isFirstMount = useFirstMountState();
diff --git a/src/useUpsert.ts b/src/useUpsert.ts
index 2fdb3d8fc3..b4854ed676 100644
--- a/src/useUpsert.ts
+++ b/src/useUpsert.ts
@@ -1,5 +1,5 @@
-import useList, { ListActions } from './useList';
-import { IHookStateInitAction } from './misc/hookState';
+import useList, { ListActions } from './useList.js';
+import { IHookStateInitAction } from './misc/hookState.js';
 
 export interface UpsertListActions<T> extends Omit<ListActions<T>, 'upsert'> {
   upsert: (newItem: T) => void;
diff --git a/src/useVibrate.ts b/src/useVibrate.ts
index 3481fc1379..f00ab54b1e 100644
--- a/src/useVibrate.ts
+++ b/src/useVibrate.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { isNavigator, noop } from './misc/util';
+import { isNavigator, noop } from './misc/util.js';
 
 export type VibrationPattern = number | number[];
 
diff --git a/src/useVideo.ts b/src/useVideo.ts
index 5cfb7ed0f8..534589b6be 100644
--- a/src/useVideo.ts
+++ b/src/useVideo.ts
@@ -1,4 +1,4 @@
-import createHTMLMediaHook from './factory/createHTMLMediaHook';
+import createHTMLMediaHook from './factory/createHTMLMediaHook.js';
 
 const useVideo = createHTMLMediaHook<HTMLVideoElement>('video');
 
diff --git a/src/useWindowScroll.ts b/src/useWindowScroll.ts
index 36ae8e1804..0a57a160b2 100644
--- a/src/useWindowScroll.ts
+++ b/src/useWindowScroll.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
-import { isBrowser, off, on } from './misc/util';
-import useRafState from './useRafState';
+import { isBrowser, off, on } from './misc/util.js';
+import useRafState from './useRafState.js';
 
 export interface State {
   x: number;
diff --git a/src/useWindowSize.ts b/src/useWindowSize.ts
index 10d9402767..c6d16cba95 100644
--- a/src/useWindowSize.ts
+++ b/src/useWindowSize.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
-import useRafState from './useRafState';
-import { isBrowser, off, on } from './misc/util';
+import useRafState from './useRafState.js';
+import { isBrowser, off, on } from './misc/util.js';
 
 // Define the type for options that can be passed to the hook
 interface Options {