Page uses cached styles on page refresh. Needs forced refresh to work

[irg1008]

Describe the Bug

I am using:

• Vite + React-SWC
• Styling with tailwindcss
• Provider for NextUI library
• PNPM (tested with NPM too)

When you make a change, vite automatically reflects the changes. Then if you go ahead and refresh the page, all styles are lost and fallbacks to use the cached styles. No matter how many times you refresh the page or make any changes to the code then, it won't update the styles.

You need to perform a force reload (ctr + f5) to display the correct styles

I am not entirely sure it's a problem of generouted or tailwind, but it's still happening when removing the UI library provider.

Generouted Version

1.15.4

Your Example Website or App or Reproduction

https://stackblitz.com/github/irg1008/pals-client?file=package-lock.json

Steps to Reproduce the Bug or Issue

1. Open stackblitz
2. Launch this command i -D @swc/cli @swc/core Won't work without it
3. Change any tailwind style in index.tsx in /pages folder
4. See how changes are correctly displayed
5. Refresh page
6. Cached styles are used
7. No change overrides the cache and will be used until rebooting server

Expected Behavior

Expected to refresh new styles on page refresh, not to use the cached

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Brave
• Browser version: 1.56.20

Additional context

It could be an issue with vite for all I know, but I am really new with vite + react + swc (usually work with next.js)

If you need any further instruction please say so

https://github.com/oedotme/generouted/assets/47559427/262a0b20-57f7-40ce-ae37-86f81dafa0e2

[monarcode]

I have noticed this too with vite, not sure if it's a vite problem or a generouted problem, I just chucked it up to some weird behavior with Vite HMR and caches

I have become accustomed to just hard refreshing the page when I make changes

If this is a problem with generouted or what ever and anyone knows a solution, please share

[irg1008]

I thnk is vite, it won't update a simple javascript function inside the code. I just changed a function to use GET instead of POST and It wouldn't work until hard refresh. This makes such an awful DX

Edit: typos

[oedotme]

@irg1008 I believe this issue it's NOT related to generouted but I've encountered a similar issue and I'm happy to help.

In a Solid project, it was due outdated versions/caches of the modules served by Vite (specially the first time of the server start) then it required to clear the browser cache for it work as expected. I've never encountered that in React projects with the default Vite plugin though.

There's something you can test out to to make sure it's a cache problem, by checking the option Disable cache from the Developer tools, Network tab and see how it behaves:

For me with the cache disabled, it worked as expected.

Another solution I tried later, is to disabled Vite's server cache by adding custom headers and it works well so far:

// vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import generouted from '@generouted/solid-router/plugin'

export default defineConfig({
  plugins: [solid(), generouted()],
  resolve: { alias: { '@': '/src' } },
  server: { headers: { 'cache-control': 'no-store' } },
})

Hope that helps!

cc @monarcode

[irg1008]

It works with "disabled cache". So It seems it's Vite related. This behavior can be very werird sometimes.

Thanks. Shall we close this?

[oedotme]

Yeah sure, I still believe it's not generouted related.

As I mentioned using custom cache headers solved it for me. I'll keep you guys posted if I encounter updates on this though.

Thanks!

[artyrcheek]

For me it doesn't work with the "disabled cache", It's still using old cached files. I'm not 100% sure it isn't generouted related. I started having these issues when I implemented generouted. It seems really hit-and-miss for me as well, Sometimes HMR works, and sometimes I have to delete my .vite folder to view any new changes, which is awful DX.

Its such a shame because I'm loving using the generouted file based routing.

[artyrcheek]

Sometimes when i first load a page it uses an old version of the component, then once I save it updates to the latest version.

[artyrcheek]

I think this may have fixed it for me

[oedotme]

For me it doesn't work with the "disabled cache", It's still using old cached files.

When you tested that, do you keep the dev tools open while disabling the network cache?

I'm not 100% sure it isn't generouted related. I started having these issues when I implemented generouted.

Yeah, it could. But I'm thinking it could be related to the modules/files Vite imports for the pages, which directly exposed and handled by Vite.

Sometimes HMR works, and sometimes I have to delete my .vite folder to view any new changes, which is awful DX.

Mostly running vite dev --force will do that without you deleting it manually.

Sometimes when i first load a page it uses an old version of the component, then once I save it updates to the latest version.

I was encountering that exactly as well.

Btw, have you tried to set the headers of the dev server to disable the cache?

I think this may have fixed it for me

So using the routes object, not the Routes component fixes it for you?

[artyrcheek]

When you tested that, do you keep the dev tools open while disabling the network cache? Btw, have you tried to set the headers of the dev server to disable the cache?

Yeah I tried both, I didn't seem to help. I am using a weird setup with the Shopify CLI though, maybe that has something to do with it.

So using the routes object, not the Routes component fixes it for you?

Yeah I think it has. Sometimes HMR doesn't work on the first load but a refresh after that does seem to sort it.

[oedotme]

@artyrcheek is it possible to provide a repro with your setup? I can take a look and see if I could help.

[henrikvilhelmberglund]

I also had this issue. I had code that was correct but React showed an error for the route which made me very confused. Ctrl+F5 in the route fixed the error.

Here I have code that shows a number. I change it to 2, HMR updates it to 2. I refresh using F5 and it turns back into 1. I hard refresh using Ctrl+F5 and it turns back into 2.

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import { routes } from 'generouted/react-router'

root.render(<RouterProvider router={createBrowserRouter(routes)} />, ...)

fixed it for me too.

[oedotme]

Update: this is comment is useful for code-splitting but I don't think it has a relation to the cache issue anymore specially since upgraded to vite@5+ including the beta versions.

Quick update, after encountering something with Vite's pre-bundling, I thought that this issue #113 might be related to the pre-bundling. @artyrcheek also mentioned before about removing the .vite directory was sometimes needed.

While using the splitVendorChunkPlugin from Vite, the application code is included in the vendor bundle — which is unexpected. It seems as the source of the glob is from the node_modules, the pages are treated as a dependency.

I thought the fact of splitting the application code may have been a factor of solving this issue for me indirectly as I added it the same time disabled the server cache headers if I recall correctly, here's the config with Vite's vendor plugin:

// vite.config.ts

import { defineConfig, splitVendorChunkPlugin as vendor } from 'vite'
import generouted from '@generouted/react-router/plugin'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react(), vendor(), generouted()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => (id.includes('@generouted/react-router') ? 'app' : undefined),
      },
    },
  },
})

# Before — only with vendor plugin

dist/index.html                    0.59 kB │ gzip:  0.34 kB
dist/assets/vendor-345e051d.css    6.70 kB │ gzip:  1.99 kB
dist/assets/index-5f2c0278.js      0.91 kB │ gzip:  0.52 kB
dist/assets/vendor-4f615dfd.js   206.32 kB │ gzip: 66.96 kB

# After — with vendor plugin + manualChunks config for generouted

dist/index.html                   0.66 kB │ gzip:  0.36 kB
dist/assets/app-345e051d.css      6.70 kB │ gzip:  1.99 kB
dist/assets/index-fe566760.js     0.94 kB │ gzip:  0.53 kB
dist/assets/app-5bb20a2a.js      13.41 kB │ gzip:  4.52 kB
dist/assets/vendor-d067b622.js  192.98 kB │ gzip: 62.70 kB

The second output is more to be expected and should be the default IMO. Plus if that config is proven to solve the issue for you guys, I'll add this config to the generouted's Vite plugin to do that automatically.

cc @irg1008 @monarcode @artyrcheek @henrikvilhelmberglund