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.
» npm install eslint-plugin-react-refresh
I just got the same error, a bit different use, but I also had a Utilities.tsx file where I abstracted away functions, error happened when I tried to have both function exports and component exports at the same time.
export const sum = (a,b) => {
return a + b
}
export const Component = () => {
return <p>Hello World</p>
}
This would cause an error since it has both functions and components being exported. You must have a separate file that exports your reusable or abstracted components in order for Fast Refresh to work.
import { lazy, Suspense } from "react";
import { ICustomRoute } from "../types";
import Loader from '../loader'
const LoginPage = lazy(() => import("../pages/auth/login"));
const LoginSuccessPage = lazy(() => import("../pages/auth/login/success"));
function lazyComponent (element: ReactNode): ReactNode {
return (
<Suspense fallback={<Loader />}>
{element}
</Suspense>
)
}
const authRoutes: ICustomRoute[] = [
{
path: "/login",
element: lazyComponent(<LoginPage />),
children: [
{
path: "welcome",
element: lazyComponent(<LoginSuccessPage />),
},
],
},
];
const router = createHashRouter(authRoutes)
function Router () {
return <RouterProvider router={router} />
}
export default Router
// App.tsx
function App () {
return (
<div>
<Routes />
</div>
)
}
This is how I solved it. If it's not appropriate, thank you very much for pointing it out
SOLVED: I ended up making a context.jsx and a provider.jsx, which seems kinda weird to me, but what do i know im just a jr.
Hello! I'm trying to learn to use contexts but i get this warning "Fast refresh only works when a file only exports components. Move your component(s) to a separate file."
I get it, its because im exporting twice. But how should i do it correctly? 2 files? One for context and one for provider??
This is my context.jsx, then i have a Cart.jsx where i plan to use it, and a Layout.jsx that wraps the outlet with the context
import {useState, createContext } from "react";
export const CartContext = createContext()
export function CartProvider({children}){
const [cart, setCart] = useState([])
const handleCart = (new) =>{
setCart((prevCart) => [...prevCart, new])
}
return(
<CartContext.Provider value={{cart, handleCart }}>
{children}
</CartContext.Provider>
)
}Hi there.
We are facing an interesting challenge with HMR in react-refresh that I would love to hear if someone has solved elegantly before.
Context
We are building an extensible admin dashboard in React using Vite (currently migrating from webpack). The dashboard comes with dedicated "injection zones" where developers can create and inject their own components to support their specific use case.
(I can provide more context if needed)
An extension looks like this:
import type { WidgetConfig } from "@medusajs/admin"
const ProductWidget = () => {
return (
<div>
<h1>Product Widget</h1>
</div>
)
}
export const config: WidgetConfig = {
zone: "product.details.after",
}
export default ProductWidgetThe component, here ProductWidget, is what gets injected. The config is what defines where it is injected. Both are used at build time to extend the default admin application.
As you can see, this breaks HMR because the files do not only export React components. This means everytime an update is made to this component, the entire component will be re-run, as well as other files that might import it. This is less than ideal. Please note, I understand why HMR works like this, so let's not get too much into that.
We would reeeeeally like to keep the current developer experience of creating extensions i.e. having files that export a component + a specific config object, but I fear we need to bite the bullet and change the way our config is exported.
We've found that `tanstack/router` was patched to make HMR work as expected, but this solution doesn't work for us, as our config is not a class: https://github.com/TanStack/router/commit/9f2150190a628fb3767ca8ad0d8634b357f43c51
Has anyone managed to solve this elegantly? Does anyone have ideas for how we could solve this elegantly?
I've been getting "Fast Refresh had to perform a full reload. See https://nextjs.org/docs/basic-features/fast-refresh#how-it-works" warnings in my dev logs and it'd be nice to not.
I'm going to guess the culprit is exporting the props types along with the component. However, I'm guilty of doing this a lot and refactoring would be a pain unless I know it is in fact the issue.
Is there a good way to determine the actual cause? a lint rule? a verbose log?