Browser not automatically refreshing

[2Up1Down]

Hi guys,

Thanks for your boilerplate three/next js project.

I'm experiencing some issues that the browser is not automatically refreshing after a code change. Here is a short video about it: [https://www.loom.com/share/e505126aeec24b1a8e3d3212200ba061]

I use format on save and this normally works well. I tested it with a plain next js project ("yarn create next-app" and later "yarn dev") and didn't encounter any problem with the browser refreshing himself.

Do you have any advice on how to fix this?

FYI: I consider myself still a junior developer and it's the first time I come in contact with three js, webpack and tailwind. So it might be a dumb mistake on my environment.

[Johnathan-Aretos]

Hey @2Up1Down,

I'm not too sure how internally the fast refresh works, but I did notice that the initial page component won't adhere to fast refresh. (I remember reading something but it's slipped my mind at the moment)

Can you give this a go....

add a new component

const RandomComp = () => {
  return (
    <div>Hello</div>
  )
}

and call it from Page

<RandomComp />

and see if you can update RandomComp with fast refresh functionality

[2Up1Down]

Hi @Johnathan-Aretos thanks for your help. I gave it a try and you were correct. The inital page component won't refresh, but everything inside components do.

[Johnathan-Aretos]

Awesome, glad I could help. Maybe someone else can shed some light on this situation.

[hrithikwins]

I too faced this issue, everytime we make changes to the 3D view, like I did add some onHover and other functions and also sometimes cubes.. so everytime I had to refresh the page, but the jsx part worked normally I thought this is with react-three-fiber itself