🤭
React-CallのFast Refreshが効かないバグの解決法
バグ
以下のIssueはviteだけど、NextJSでもQuick setup通りにやるとコンポーネント編集のたびにfull reloadされ開発体験が悪い。
コンポーネント編集すると以下の警告が出る
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