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.

[radoslavkarlik]

But why is that a problem? Is it causing issues or it literally stops working? I wonder what is the reason behind this as I can't really find more information other than this answer which is what the lint rule says already.

[ccssmnn]

I was using NextJS. You can find the constraint in their Fast Refresh Docs

https://nextjs.org/docs/architecture/fast-refresh

For Vite, the react plugin has similar constraints documented:

https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports

[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)

[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};
  },
}