Set "moduleResolution": "nodenext" to tsconfig

src/core/index.ts

@@ -6,4 +6,4 @@ export type {
   AnimatableCSSProperties,
   PlayOptions,
   WaitingAnimationEventName,
-} from "./waapi";
+} from "./waapi.js";

src/core/utils.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { isSameObject, isSameObjectArray } from "./utils";
+import { isSameObject, isSameObjectArray } from "./utils.js";
 
 describe("isSameObject", () => {
   it("should return true if the objects are same", () => {

src/core/waapi.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getKeyframeKeys } from "./waapi";
+import { getKeyframeKeys } from "./waapi.js";
 
 describe("getKeyframeKeys", () => {
   it("normal", () => {

src/core/waapi.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from "react";
-import { getKeys, uniq } from "./utils";
+import { getKeys, uniq } from "./utils.js";
 
 export type AnimatableCSSProperties = Omit<
   CSSProperties,

src/index.ts

@@ -1,2 +1,2 @@
-export * from "./core";
-export * from "./react";
+export * from "./core/index.js";
+export * from "./react/index.js";

src/react/components/TransitionGroup.tsx

@@ -8,7 +8,7 @@ import {
   ReactElement,
   useCallback,
 } from "react";
-import { noop } from "../../core/utils";
+import { noop } from "../../core/utils.js";
 
 const toMap = (elements: ReactElement[]) =>
   elements.reduce((acc, e, i) => {

src/react/components/index.ts

@@ -1,2 +1,2 @@
-export { TransitionGroup } from "./TransitionGroup";
-export type { TransitionGroupProps } from "./TransitionGroup";
+export { TransitionGroup } from "./TransitionGroup.js";
+export type { TransitionGroupProps } from "./TransitionGroup.js";

src/react/hooks/index.ts

@@ -1,5 +1,5 @@
-export * from "./useAnimation";
-export * from "./useAnimationFunction";
-export * from "./useTransitionAnimation";
-export * from "./useScrollTimeline";
-export * from "./useViewTimeline";
+export * from "./useAnimation.js";
+export * from "./useAnimationFunction.js";
+export * from "./useTransitionAnimation.js";
+export * from "./useScrollTimeline.js";
+export * from "./useViewTimeline.js";

src/react/hooks/state.ts

@@ -1,5 +1,5 @@
-import { isSameObject, isSameObjectArray } from "../../core/utils";
-import { createAnimation } from "../../core/waapi";
+import { isSameObject, isSameObjectArray } from "../../core/utils.js";
+import { createAnimation } from "../../core/waapi.js";
 
 /**
  * @internal

src/react/hooks/useAnimation.ssr.spec.tsx

@@ -4,7 +4,7 @@
 import { it, describe, expect } from "vitest";
 import { useEffect } from "react";
 import { renderToString, renderToStaticMarkup } from "react-dom/server";
-import { useAnimation } from "./useAnimation";
+import { useAnimation } from "./useAnimation.js";
 
 describe("SSR", () => {
   const Comp = () => {

src/react/hooks/useAnimation.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { assign, getStyle, toArray } from "../../core/utils";
+import { assign, getStyle, toArray } from "../../core/utils.js";
 import {
   PlayOptions,
   _cancel,
@@ -13,16 +13,16 @@ import {
   WaitingAnimationEventName,
   TypedKeyframe,
   GetKeyframeFunction,
-} from "../../core/waapi";
-import { useStatic } from "./useStatic";
-import { useLatestRef } from "./useLatestRef";
-import { AnimationDefinition } from "../types";
+} from "../../core/waapi.js";
+import { useStatic } from "./useStatic.js";
+import { useLatestRef } from "./useLatestRef.js";
+import { AnimationDefinition } from "../types/index.js";
 import {
   deleteAnimation,
   getAnimation,
   AnimationObject,
   initAnimation,
-} from "./state";
+} from "./state.js";
 
 const normalizeKeyframe = <Args>(
   el: Element,

src/react/hooks/useAnimationFunction.ssr.spec.tsx

@@ -7,7 +7,7 @@ import { renderToString, renderToStaticMarkup } from "react-dom/server";
 import {
   useAnimationFunction,
   ComputedTimingContext,
-} from "./useAnimationFunction";
+} from "./useAnimationFunction.js";
 
 describe("SSR", () => {
   const Comp = () => {

src/react/hooks/useAnimationFunction.ts

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { isSameObject } from "../../core/utils";
+import { isSameObject } from "../../core/utils.js";
 import {
   TypedKeyframeEffectOptions,
   createAnimation,
@@ -12,10 +12,10 @@ import {
   _setRate,
   _setTime,
   WaitingAnimationEventName,
-} from "../../core/waapi";
-import type { BaseAnimationHandle } from "./useAnimation";
-import { useStatic } from "./useStatic";
-import { useLatestRef } from "./useLatestRef";
+} from "../../core/waapi.js";
+import type { BaseAnimationHandle } from "./useAnimation.js";
+import { useStatic } from "./useStatic.js";
+import { useLatestRef } from "./useLatestRef.js";
 
 /**
  * Handle of {@link useAnimationFunction}.

src/react/hooks/useLatestRef.ts

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 
 /**
  * @internal

src/react/hooks/useScrollTimeline.ts

@@ -1,8 +1,8 @@
-import { assign } from "../../core/utils";
-import { ScrollTimelineAxis, TimelineDefinition } from "../types";
-import { SCROLL_TIMELINE } from "../types/internal";
-import { useLatestRef } from "./useLatestRef";
-import { useStatic } from "./useStatic";
+import { assign } from "../../core/utils.js";
+import { ScrollTimelineAxis, TimelineDefinition } from "../types/index.js";
+import { SCROLL_TIMELINE } from "../types/internal.js";
+import { useLatestRef } from "./useLatestRef.js";
+import { useStatic } from "./useStatic.js";
 
 export interface ScrollTimelineOpts {
   axis?: ScrollTimelineAxis;

src/react/hooks/useTransitionAnimation.ts

@@ -6,17 +6,17 @@ import {
   TransitionNotifierContext,
   TransitionState,
   TransitionStateContext,
-} from "../components/TransitionGroup";
-import { AnimationHandle, useAnimation } from "./useAnimation";
-import { getKeys, noop } from "../../core/utils";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+} from "../components/TransitionGroup.js";
+import { AnimationHandle, useAnimation } from "./useAnimation.js";
+import { getKeys, noop } from "../../core/utils.js";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
 import type {
   TypedKeyframeEffectOptions,
   GetKeyframeFunction,
   TypedKeyframe,
-} from "../../core";
-import { useStatic } from "./useStatic";
-import { useLatestRef } from "./useLatestRef";
+} from "../../core/index.js";
+import { useStatic } from "./useStatic.js";
+import { useLatestRef } from "./useLatestRef.js";
 
 export interface TransitionAnimationHandle {
   (ref: Element | null): void;

src/react/hooks/useViewTimeline.ts

@@ -1,12 +1,12 @@
-import { assign } from "../../core/utils";
+import { assign } from "../../core/utils.js";
 import {
   ScrollTimelineAxis,
   TimelineDefinition,
   ViewTimelineInset,
-} from "../types";
-import { VIEW_TIMELINE } from "../types/internal";
-import { useLatestRef } from "./useLatestRef";
-import { useStatic } from "./useStatic";
+} from "../types/index.js";
+import { VIEW_TIMELINE } from "../types/internal.js";
+import { useLatestRef } from "./useLatestRef.js";
+import { useStatic } from "./useStatic.js";
 
 export interface ViewTimelineOpts {
   axis?: ScrollTimelineAxis;

src/react/index.ts

@@ -1,3 +1,3 @@
-export * from "./components";
-export * from "./hooks";
-export * from "./types";
+export * from "./components/index.js";
+export * from "./hooks/index.js";
+export * from "./types/index.js";

src/react/types/index.ts

@@ -2,8 +2,8 @@ import {
   GetKeyframeFunction,
   TypedKeyframe,
   TypedKeyframeEffectOptions,
-} from "../../core";
-import { SCROLL_TIMELINE, VIEW_TIMELINE } from "./internal";
+} from "../../core/index.js";
+import { SCROLL_TIMELINE, VIEW_TIMELINE } from "./internal.js";
 
 export interface AnimationOptions extends TypedKeyframeEffectOptions {
   timeline?: TimelineDefinition;

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "bundler",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "jsx": "react-jsx",
     "lib": ["dom", "dom.iterable", "esnext"],
     "strict": true,