frontends icon indicating copy to clipboard operation
frontends copied to clipboard

[BUG] bfcache Issue

Open BrocksiNet opened this issue 2 years ago • 2 comments

Is there an existing issue for this?

  • [X] I have searched the existing issues

Current Behavior

That's the problem image

That could be a solution https://github.com/nuxt/nuxt/pull/23667

Expected Behavior

The Issue is not shown anymore in Lighthouse for the demo-store. The demo-store works like before without any errors.

Steps To Reproduce

No response

Environment

No response

Anything else?

Another related https://github.com/shopware/frontends/issues/539

BrocksiNet avatar Mar 19 '24 07:03 BrocksiNet

Currently having the same issue, no dependencies seem to interfere with it.

InstantlyMoist avatar Mar 20 '24 22:03 InstantlyMoist

I was researching a lot today about that issue. :mag:

I assume that the issue comes from nuxt i18n module.

So I created a empty nuxt/vite project with that command: pnpm dlx nuxi@latest init <project-name>

Testing this in preview mode is important because Vite is opening a WebSocket in dev mode, which can also cause an issue with bfcache.

So the steps for testing are:

  1. pnpm build
  2. pnpm preview
  3. Open the Page in a Chrome Browser
  4. Open Dev Tools -> Application -> Back/Forward Cache -> Click on Test Button

Result:

  • Blank Nuxt/Vite Project -> No bfcache Issue :heavy_check_mark:
  • Blank Nuxt/Vite Project + i18n module -> bfcache Issue :x:

Somehow I assume it has something to do with detectBrowserLanguage function. But not sure about that. :confused:

Created an Issue here: https://github.com/nuxt-modules/i18n/issues/2876

BrocksiNet avatar Mar 22 '24 14:03 BrocksiNet

Today, I tested again with the Blank Nuxt/Vite Project + i18n module and can not reproduce the bfcache Issue anymore. This is great 🎉

So, it would be super cool to eliminate that problem in the demo-store template. 💡

Currently, we are using @nuxtjs/i18n in version 8.3.1, and I guess we need to update package.json to ^8.5.5.

But when I execute this command: pnpm run generate && pnpm run preview

I got a lot of warnings and errors. So, we need to fix the generate command first.

BrocksiNet avatar Oct 01 '24 09:10 BrocksiNet

So when I update @nuxtjs/i18n and comment out this part in app.vue: //useBroadcastChannelSync();

We do not have any bfcache Issue anymore: Image

FYI @mdanilowicz

BrocksiNet avatar Oct 01 '24 11:10 BrocksiNet