🤭

React-CallのFast Refreshが効かないバグの解決法

2025/02/04に公開

バグ

以下のIssueはviteだけど、NextJSでもQuick setup通りにやるとコンポーネント編集のたびにfull reloadされ開発体験が悪い。
https://github.com/desko27/react-call/issues/31

コンポーネント編集すると以下の警告が出る

Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

どうやらlayoutにRootを置いていると、この警告が出るっぽい。

一時的な解決法としては、別ファイルでcreateCallableを呼び出すとFast Refreshが上手くいくようになった。

call/create-task-dialog.tsx
"use client"
export const CreateTaskDialog: ReactCall.UserComponent<
  {},
  boolean | null,
  {}
> = ({ call, ...props }) => {
...
}
call/index.ts
'use client';

import { createCallable } from 'react-call';
import { CreateTaskDialog } from './create-task-dialog';

const CreateTaskCall = createCallable(CreateTaskDialog, 150);
const CreateTaskCallRoot = CreateTaskCall.Root;
export { CreateTaskCall, CreateTaskCallRoot }

Discussion