Loader warning "Fast refresh only works when a file only exports components..."

[fiorins]

Hi, I'm trying to use React Router in my React Vite app testing my page with a loader but it comes with a warning on the loader const name:
"Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components."

I couldn't figure out what it means and how to fix it. Can you help me on understand it and where I'm wrong?

import { useEffect } from "react";
import { useLoaderData, Form, redirect, useParams } from "react-router-dom";

export const loader = ({ params }: any) => async () => {
    const note = params.noteId;
    console.log("note1: ", note);
    if (!note) throw new Response("", { status: 404 });
    return note;
  };

export default function NotePage() {
  const note = useLoaderData();
  console.log("note2: ", note);

  return (
    <div>
      Note Test
    </div>
  );
}

[ccssmnn]

Hey! You are exporting both a component and a function from the same file. Fast Refresh only works, when you're exporting components exclusively. For Fast Refresh to work, you need to put your NotePage Component and the loader into different files, e.g., notepage.element.tsx and notepage.loader.ts.

[ccssmnn]

You can also avoid splitting each route into separate files by attaching the loaders, actions and so on to the route element directly:

import {
  ActionFunctionArgs,
  LoaderFunctionArgs,
  useFetcher,
  useLoaderData,
} from "react-router-dom";

async function loader({}: LoaderFunctionArgs) {
  return null;
}

async function action({}: ActionFunctionArgs) {
  return null;
}

export function MyElement() {
  const data = useLoaderData() as Awaited<ReturnType<typeof loader>>;
  const fetcher = useFetcher<Awaited<ReturnType<typeof action>>>();
  return null;
}

MyElement.loader = loader;
MyElement.action = action;

Then you can use it in your router like so:

<Route path="/login" element={<LoginElement />} action={LoginElement.action} loader={LoginElement.loader} />

This way you are only exporting a react component from your module and keep the colocation of loaders, actions and route elements.

[robertjpayne]

This doesn't work if you're loading your routes lazily, I've been trying to find a way to do it lazily but not had much luck yet.

[joelstein]

@robertjpayne See below.

#10856 (reply in thread)

[Olimarrex]

This doesn't make sense, what's the point in hmr if it limits you to only exporting components? How are you supposed to use hooks, consts, etc between scripts?

[ccssmnn]

@Olimarrex this is a technical constraint. HMR is not perfect. it's a utility to keep state when actually swapping out component code, instead of starting fresh with live reloading. i find this useful when working with large forms or modals. using this tool we must follow it's constraints.

you can also just not use HMR and maybe even improve UX by persisting form values in sessionStorage or just set open to true when working with modals.

[joelstein]

This seems to work for me in .eslintrc.cjs:

module.exports = {
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      { allowExportNames: ["loader"] },
    ],
  },
};

See https://github.com/ArnaudBarre/eslint-plugin-react-refresh?tab=readme-ov-file#allowexportnames-v044.

[joelstein]

Actually, all that does is hide the eslint warning. It doesn't improve fast refresh.

[joelstein]

This did the trick.

In the component file:

async function loader() {
  return await fetcher('/some-data');
}

export function Component() {}

Component.loader = loader;

In createBrowserRouter:

{
  path: "some-page",
  async lazy() {
    const {Component} = await import("./some-page");
    return {loader: Component.loader, Component};
  },
}

[luisrudge]

this doesn't "fast refresh" the loader, so when you update your code it doesn't refetch the data.