[React Native + TanStack Form] handleSubmit 에러 삽질

tl;dr

• 버전: @tanstack/react-form@^1.12.0, expo@53.0.9, React compiler enabled
• 오류: handleSubmit 호출 시 right operand of 'instanceof' is not an object 오류 발생
• 해결법: ES module import 대신 CommonJS로 불러오면 됩니다...

해당 이슈가 이미 있었다... https://github.com/TanStack/form/issues/1501

삽질기

form.handleSubmit()을 불러도 응답이 없길래 에러라도 발생하나 하고 .catch로 에러를 봤더니 다음과 같은 에러 메시지를 주고 있었다.

right operand of 'instanceof' is not an object...

즉시 TanStack Form 리포지토리에 instanceof로 검색해 봤지만 관련 있는 코드는 단 하나도 나오지 않았다. -> 무한 로그 찍기의 시작

열심히 로그를 찍으며 어디에서 오류가 생기는지 관찰한 결과, @tanstack/store의 scheduler.js의 다음 부분에서 오류가 발생하고 있는 것을 알았다.

import { Derived } from "./derived.js";
// ---> 왠지 모르게 Derived가 undefined로 나옴

그런데 derived.js에서 로그를 찍었을 때에는 정상적으로 클래스가 나왔다. 알 수 없는 이유로 derived.js보다 scheduler.js가 먼저 로드되면서 scheduler.js에서는 Derived가 undefined로 나오는 게 아닌가 한다.

다행히도 ESM을 버리고 CJS를 택하니 문제가 해결되었다.

// XXX: This import is necessary to ensure that the `@tanstack/react-form` package is loaded in cjs correctly.
const { createFormHook, createFormHookContexts } =
  require("@tanstack/react-form") as typeof import("@tanstack/react-form");

const { fieldContext, formContext } = createFormHookContexts();

export const { useAppForm } = createFormHook({
  ...,
  fieldContext,
  formContext,
});

무서운 점은 대체 어디가 문제인지 모르겠다는 것이다. expo? metro? react compiler? tree-shaking? 어딘가 dependency graph가 꼬인 게 아닌가 싶기도 하다...