Stuck Preview In Both Prototyper and Code

Hello Devs.

I am building an app with NextJS.
Sometimes the prototyper makes mistakes and I give it a few more prompts to solve the issue and if it does not work, I restore to the previous commit to prompt it afresh. It gets to a point where the changes are made but the preview is not updated. This affects both the prototyper and code view.

I have attempted to solve the issue buy rebuilding the app with no success. The only solution that works is duplicating the template but then you will run to the issue again in future with the new duplicate and you have to duplicate it again.

Has anyone ran into this and how did you solve it?

Example: This image shows the Dialog contains an option to select password or link sign in to customise the UI but the preview shows the old sign in dialog that has everything together.

1 Like

If the preview window is not updating you can try forcing a hard restart. In the preview window to the left of the address bar is a reload button. Click the down arrow and choose “hard restart”. This will force a rebuild of your app.

You can also look at the build log in Output panel. Choose “Previews” from dropdown and this will should you the Next.js output. This may reveal a compilation issue that is preventing the new version from loading.

1 Like

Thank you for your quick response. Unfortunately this does not work, The hard restart and reload have the same effect. However I noticed a new behaviour. The hot reload does update to the latest version when I make some changes in the code. But if I refresh, the old code is still shown.

This is good for the code option but there is no hot reload in the prototyper, so it still loads the old code. Any page reload or app restart will get you back to the old code preview.

Here is a video I attached. You can see after doing a hard restart, the preview is still the old one but when I modify something in the code, the preview is updated to the latest one.

Firebase Studio Preview Stuck Demonstration

Update

I tried out the same workspace by sharing to another user and they had no problem. Further, I tried out using a different laptop with my account and it worked. So clearing the cookies is the solution. This includes the google.com site cookies and the embedded sites cookies. Clearing only some of them does not solve the issue.

1 Like

I see when you changed the code the build log showed a CORS error, perhaps this is for the hot reloading?

Take a look at next.config.js: allowedDevOrigins | Next.js and see if you add the dev domain of the URL it’s complaining about in the log if that fixes your issue. Probably need a hard restart when editing this config.

Let me know if you try it.

2 Likes

The issue is still happening with the cors policy configured. If the issue happens clearing all cookies fixes the issue so my best guess is the cookies are causing the issue. The issue can be reproduced by restoring to previous change a few times.

Removing the google.com or firebase cookies does not log you out of your google account

I will use this solution for now but it would be great to investigate this further.
I have found myself several times re-prompting thinking the AI did not make sufficient changes only to realize the preview is the issue.

Thank you. I have captured your notes and workaround in an internal ticket for the product team to investigate further.

1 Like