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.

[HendrikSchmidt]

The documentation explicitly mentions this issue: https://reactrouter.com/explanation/hot-module-replacement#supported-exports.

React Fast Refresh can only handle component exports. While React Router manages route exports like action, headers, links, loader, and meta for you, any user-defined exports will cause full reloads:

// These exports are handled by the React Router Vite plugin
// to be HMR-compatible
export const meta = { title: "Home" }; // ✅
export const links = [
  { rel: "stylesheet", href: "style.css" },
]; // ✅

// These exports are removed by the React Router Vite plugin
// so they never affect HMR
export const headers = { "Cache-Control": "max-age=3600" }; // ✅
export const loader = async () => {}; // ✅
export const action = async () => {}; // ✅

// This is not a route module export, nor a component export,
// so it will cause a full reload for this route
export const myValue = "some value"; // ❌

export default function Route() {} // ✅

So this should be fine and I would follow @joelstein initial advice and do the following:

module.exports = {
  rules: {
    "react-refresh/only-export-components": [
      "warn",
      {
        allowExportNames: [
            "loader",
            "clientLoader",
            "action",
            "clientAction",
            "ErrorBoundary",
            "HydrateFallback",
            "headers",
            "handle",
            "links",
            "meta",
            "shouldRevalidate",
          ],
      },
    ],
  },
};

[ccssmnn]

yeah the framework mode helps here! thanks for pointing it out