<Link> tag reloads page instead of navigating #8791
Comments
|
I'm also having this issue, both |
|
Just migrated our production app to vite and this started happening. Also happens when redirecting using |
|
Okay maybe you can check by yourselves but I think the problems comes from "process.env" lines... I have a file in which I initialized the firebase app but I wanted privacy so all the keys given by the firebase console, i hid them in the .env file. Now that i've replaced those lines with the actual firebaseConfig hardcode parameters(basic configuration given by the firebase console), it works well for now in local and in preview mode deployment mode on Vercel. Please let me know if erasing these similar lines of code worked for you. |
|
This usually comes from errors trying to load the JS for the destination route. Your stackblitz doesn't run because it needs an API key though: I would try to use chrome dev tools or just edit the source in remix/packages/remix-react/routeModules.ts Line 204 in 6a2a4dd |
|
@brophdawg11 In my case it's trying to load an asset with Then it fails with no error :)) 
But this happens only in production build, not local development |
|
Well, found it :)) In my case, my colleague used Prisma enum in a route component. Is there a way to warn about this? |
|
Yes and no :) We can warn (and have a PR open to do so in #8932) but the issue is that Remix automatically reloads the page for you so that console is immediately lost if you don't have I think this is more prevalent when using vite since previously I believe these types of module errors would have failed during the |
|
I'm still experiencing this issue in Remix My code for navigating looks like this: <span className="flex gap-2">
<Button variant="ghost" asChild>
<Link to={`${id}/signups`}>View Signups</Link>
</Button>
<Button variant="secondary" asChild>
<Link to={`${id}/edit`}>Edit</Link>
</Button>
<deleteFetcher.Form method="POST" action={`${id}/delete`}>
<Button type="submit" variant="destructive" disabled={isDeleting}>
{isDeleting ? "Deleting..." : "Delete"}
</Button>
</deleteFetcher.Form>
</span>That's the route I'm trying to link to: https://github.com/Apsysikal/mokupona/blob/dep/vite/app/routes/admin.dinners.%24dinnerId_.edit.tsx Any help is appreciated. P.S. after building and serving the app it does navigate. So it seems to be a dev issue. |
|
For anyone coming after this. The error for me was that i had typescript type ending up on the client. My zod schema contained: cover: z
.union([
z.instanceof(File, { message: "You must select a file" }),
z.instanceof(NodeOnDiskFile, { message: "You must select a file" }),
])
.instanceof(File, { message: "You must select a file" })
.refine((file) => {
return file.size !== 0;
}, "You must select a file")
.refine((file) => {
return file.size <= 1024 * 1024 * 3;
}, "File cannot be greater than 3MB"),and because |
|
I experienced something similar. I am using drizzle, zod and shadcnui too so I thought it was related to these packages since you were using these too. But in my case it was something related a loader route that it was not returning nothing if it was failing: import { db } from '~/utils/db.server';
import { parseWithZod } from '@conform-to/zod';
import { type ActionFunctionArgs, json, redirect } from '@remix-run/node';
import { InsertExpenseSchema, expenses } from 'drizzle/schema';
export async function action({ request }: ActionFunctionArgs) {
const formData = await request.formData();
const submission = parseWithZod(formData, {
schema: InsertExpenseSchema
});
if (submission.status !== 'success') {
return json(
{ result: submission.reply(), expenseId: null },
{ status: submission.status === 'error' ? 400 : 200 }
);
}
let expense;
try {
const [insertedExpense] = await db
.insert(expenses)
.values(submission.value)
.returning({ id: expenses.id });
expense = insertedExpense.id;
} catch (error) {
console.error(error);
}
return json({ result: submission.reply(), expenseId: insertedExpense.id }, { status: 201 });
}
export function loader() {
return redirect('/monthlies');
}Even tho I was not hitting up this route the error was breaking the app, getting the link refresh behavior. Maybe there is something wrong with the vite plugin that is not showing these kind of silent errors that were not silent with the previous bundler. |
|
For me it didn't seem to be anything related to that. In the end i had to go further with separating the two validation schemas. // event-validation.client.ts
import { z } from "zod";
export const ClientEventSchema = z.object({
title: z.string({ required_error: "Title is required" }).trim(),
description: z.string({ required_error: "Description is required" }).trim(),
date: z.coerce.date({ required_error: "Date is required" }),
slots: z
.number({ required_error: "Slots is required" })
.min(0, "Slots cannot be less than 0")
.int(),
price: z
.number({ required_error: "Price is required" })
.min(0, "Price cannot be less than 0")
.int(),
cover: z
.instanceof(File, { message: "You must select a file" })
.refine((file) => {
return file.size !== 0;
}, "You must select a file")
.refine((file) => {
return file.size <= 1024 * 1024 * 3;
}, "File cannot be greater than 3MB"),
addressId: z.string({ required_error: "Address is required" }).trim(),
});// event-validation.server.ts
import { NodeOnDiskFile } from "@remix-run/node";
import { z } from "zod";
export const ServerEventSchema = z.object({
title: z.string({ required_error: "Title is required" }).trim(),
description: z.string({ required_error: "Description is required" }).trim(),
date: z.coerce.date({ required_error: "Date is required" }),
slots: z
.number({ required_error: "Slots is required" })
.min(0, "Slots cannot be less than 0")
.int(),
price: z
.number({ required_error: "Price is required" })
.min(0, "Price cannot be less than 0")
.int(),
cover: z
.instanceof(NodeOnDiskFile, { message: "You must select a file" })
.refine((file) => {
return file.size !== 0;
}, "You must select a file")
.refine((file) => {
return file.size <= 1024 * 1024 * 3;
}, "File cannot be greater than 3MB"),
addressId: z.string({ required_error: "Address is required" }).trim(),
});This was because the uploaded file is an instance of NodeOnDiskFile in the remix action and an instance of File on the client. |
|
I was experiencing the same, after importing enum types from prisma as such: Solution was to update the vite config with: I spent too much time on hunting this issue, hope this info helps remix + primsa + vite users. |
This saved so much time. Thank you very much. This totally worked for me |
|
We will now be logging an error to the console in #8932 (you may need |
brophdawg11
added
the
awaiting release
|
🤖 Hello there, We just published version Thanks! |
|
🤖 Hello there, We just published version Thanks! |
brophdawg11
removed
the
awaiting release
Reproduction
https://stackblitz.com/~/github.com/Edran0111/debug-falc-on
https://github.com/Edran0111/debug-falc-on
System Info
System: OS: Windows 11 10.0.22631 CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz Memory: 2.33 GB / 15.85 GB Binaries: Node: 20.11.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.21 - ~\AppData\Roaming\npm\yarn.CMD npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Chromium (121.0.2277.112) Internet Explorer: 11.0.22621.1 npmPackages: @remix-run/css-bundle: ^2.6.0 => 2.6.0 @remix-run/dev: ^2.6.0 => 2.6.0 @remix-run/eslint-config: ^2.6.0 => 2.6.0 @remix-run/node: ^2.6.0 => 2.6.0 @remix-run/react: ^2.6.0 => 2.6.0 @remix-run/serve: ^2.6.0 => 2.6.0Used Package Manager
npm
Expected Behavior
I'm encountering a navigation issue between pages in my Remix application. When clicking on the "Mon compte" button(in the navbar), which is supposed to redirect to /login, the current page simply reloads instead of navigating to the intended route. Interestingly, all other components in my application (such as /a-propos, /a-propos#equipe, and /contact) work as expected. The issue is specific to the "Mon compte" button that points to /login.
I can access the /login page directly by entering the URL in the browser, and from there, navigation to other links like /oubli-mdp, /register, and others in the navbar works without any issues. However, I cannot navigate to the /login page from any other page outside of it.
Additionally, when I'm on the /login, /register, or /oubli-mdp pages, the Remix DevTools do not appear, even when appending "?rdt=true" to the URL. Strangely, the only workaround I've found is to remove the ActionFunction from login.tsx, which allows the navigation to work, but this is obviously not a viable solution.
Although the remix dev tools says one or two times that there is a hydration error out of 10 refresh, the message that is send does not help me with the correction of the problem.
This is what happens when i'm on the _index page, i click once on the button of "Mon compte", the loader function is triggered but I still go back on the _index page
As I'm relatively new to Remix and might be missing something, I'm unable to identify the root cause of this issue. I would appreciate any guidance or suggestions on how to resolve this without having to delete the entire ActionFunction.
Actual Behavior
When I click on any button that redirects to /login, the page loads correctly without any issues, and it does not reload the page from where I initiated the click.
PS: I encountered a similar issue previously on my _index page, where I had a simple script for counting characters and a button to submit text for translation. An ActionFunction was set up in root.tsx to handle a switch case, which, for the time being, only included a logout case. The presence of the ActionFunction interfered with the character counting and the form submission on the _index page. The issue has been resolved by relocating the ActionFunction to a different route.
The text was updated successfully, but these errors were encountered: