Next.js Discord

Discord Forum

Todo App acts like whole page is hard refreshed when updating the todo item in Firefox

Answered
Dido posted this in #help-forum
Open in Discord
DidoOP
I am playing around with a simple todo list app, using mongodb and prisma. The problem arise in development mode on latest Firefox browser. When click on a list item (todo) i am changing the bg and text color, but the transition is not smooth, the whole layout content blinks as if the page is hard refreshed.

I tried to run this app in chrome, and there's no blinking/refreshing behavior there. I also tried to run the app in production with npm start, both in Firefox and Chrome the application works smoothly without behave like page is refreshed on update items. I also tried to disable strict mode in next.config by adding reactStrictMode: false. Everything without luck.

here's the repository with the code:
https://github.com/didoslavov/nextjs-todo
Answered by Arinji
on dev whatever happens, is different for browsers and cant be recreated
View full answer

33 Replies

Thrianta
Firefox only issue?
Nvm sorry read the post and ill get the info
DidoOP
Indeed. Only in Firefox, and only in development mode - npm run dev
Works fine in production in Firefox, and works fine both in production and development in Chrome
Thrianta
import { Todo } from '@prisma/client';
in the todoItem
is this used, whats the deal with this, because prisma/client has no export of Todo
Thrianta
sigh mongo db takes a long time to spin up dormant deployments
Thrianta
well thats odd im stuck at it wanting me to run prisma generate, i thought that was suppose to create a config file, its been a long time since ive used prisma though
was trying to recreate on my own machine
DidoOP
you'll need a connection string for mongodb and .env.local with DATABASE_URL=<connection string>
run npx prisma generate to link the db with prisma, i believe.
Thrianta
oh maybe its because i did .env
Arinji
wait so its flickering in dev right?
thats normal
the question even says it works in prod, thats expected for it to flicker in dev
DidoOP
But why only in firefox. And why it is normal, I mean what is causing this ?
@Dido But why only in firefox. And why it is normal, I mean what is causing this ?
Arinji
its dev, nothing can be sure.. nextjs is compiling on the go
Thrianta
oh generate puts the file in node modules i dont remember it doing that before
Arinji
what you want to make sure is that it works in prod
Arinji
on dev whatever happens, is different for browsers and cant be recreated
Answer
Thrianta
this much is true ^
Arinji
Why do you think we run a prod build.. for production:sunglasses_1:
DidoOP
Haha I got it, but it's just odd that only behave like that in firefox. I tried 3 different apps, in 2 of them it behaves the same way, but the third one is rerendering the smoothly 😄
Arinji
thats the thing of dev, and why when you have issues peopel try and recreate on prod
dev just has its own mind
Thrianta
Yeah i had to give up at connecting to mongo through prisma didnt want to debug an issue that was specific to me
id use chrome for dev if not solveable
Thrianta
you saw that one too huh lol
Arinji
yea lol, i grind forums when i get the time
anyways Dido mark a solution once your query is resolved
DidoOP
Thanks guys, i'll stick to chrome from now on 😄
Arinji
:D
@Dido Thanks guys, i'll stick to chrome from now on 😄
Thrianta
also do disable any addons in browsers when doing development if you have any unexpected issues, all sorts of addons can cause issues especially things that block stuff like js cookies or other stuff of that nature