content
content copied to clipboard
nuxt
BUG: Hot reloading content doesn't work locally because of caching
Environment
- Operating System:
Darwin - Node Version:
v18.15.0 - Nuxt Version:
3.9.0 - CLI Version:
3.10.0 - Nitro Version:
2.8.1 - Package Manager:
[email protected] - Builder:
- - User Config:
devtools,modules - Runtime Modules:
@nuxt/[email protected] - Build Modules:
-
Reproduction
Install the nuxt content starter project and run the project.
npx nuxi@latest init content-app -t content
cd content-app
npm run dev
Open the index page and make changes to content/index.md. Reload the page. Make more changes and save the file (this time do not reload the page).
Describe the bug
When changes are made to index.md, I'd expect those changes to show up on the page (as happens on Stackblitz) however those changes only show up when the page is loaded. When the content is updated, the page fetches the updated data from the api, however it seems to fetch the data from the cache instead of getting the most up to date data.
Additional context
When I disable cache in my browser, the live updating works again. I believe this may be related to a recent commit which cached api endpoints (https://github.com/nuxt/content/commit/d2bcf70ff5102e2e717565499bee9663e7295bcd). This seems to work fine in v2.9.0 (however I haven't tested it as extensively as with 2.10.0)
Logs
No response
I got the same problem, but only with firefox. @preethamrn Which browser do you use ?
@ManUtopiK I'm using Firefox as well. The issue shows up in for me Chrome too. It's possible that you're only seeing it in Firefox because your Chrome cache is up to date (or you have disabled cache in Chrome developer tools). Try making changes to a file and you might be able to reproduce it in Chrome as well.
Same thing here also using Chrome (Arc). Disabling the cache in the dev mode solves the issue. Safari seems to not be affected, just tried it rudimentarily though.
Me too. And even if I disable caching in development mode, I still need to restart the browser to get the latest results.
Two instances of this in the Nuxt discord today, "Disable cache" in browser devtools network panel helps for now.
Disabling cache helps my app to stop freezing, however HMR still doesn't work.
"nuxt": "3.9.1"
"@nuxt/content": "npm:@nuxt/content-edge@latest"
I'm also having issues when working on various projects. If I stop the dev server on one, and then start on another - data is leaking. So for example, if I have project1/content/pages/about.md and project2/content/pages/about.md. Project 2 dev server running: the data is correct on first visit, but if I navigate away to another page and then navigate back, data from project 1 is showing.
Does the last release 2.11.0 solve this issue ? I updated my packages and still have this same HMR problem...
This seems to have been resolved. I am getting errors in the console, however HMR is working on
"@nuxt/content": "npm:@nuxt/content-edge@latest",
"nuxt": "3.9.3",
Content version is
version: /@nuxt/[email protected]([email protected])([email protected])
After upgrading to @nuxt/content 2.10.0, an issue with cache abnormalities was observed in Firefox. Following data modifications, the screen would briefly display new data, only to be immediately overwritten by old data. Simultaneously, the console would show the error [Vue warn]: Hydration text content mismatch. These issues were resolved in version 2.11.0, and they no longer occur.
However, whether upgrading to 2.11.0 or reverting to 2.9.0, it is necessary to manually clear the cache data of the Firefox test site (Ctrl+F5 has no effect) for the system to operate correctly. This action only needs to be performed once.
I also have the same issue on windows 10+pnpm with the latest packages.
------------------------------
- Operating System: Windows_NT
- Node Version: v20.10.0
- Nuxt Version: 3.9.3
- CLI Version: 3.10.0
- Nitro Version: 2.8.1
- Package Manager: [email protected]
- Builder: -
- User Config: telemetry, vite, modules, build, routeRules, components, content, formkit, imports, css, devtools
- Runtime Modules: @vueuse/[email protected], normalizedModule(), @nuxt/[email protected], @pinia/[email protected], @nuxtjs/[email protected], [email protected], @formkit/[email protected]
- Build Modules: -
------------------------------
I also don't have messages anymore when a markdown file is updated.
Tried:
nuxt cleanup
npx clear-npx-cache
Did someone find a fix/solution or should we wait for an official update?
On google chrome, I cleared the cache and it's working as expected now. With @nuxt/content 2.12.0.
It works for me in the sample project content-app. But I have a larger app extending nuxt ui pro and using many modules, and own pages, layouts and components and there it does not work anymore. I tried removing options like nitro, content, i18n, routeRule, the server middleware etc from the configuration but the issues persist. I did a npx nuxi cleanup and I am on the latest content and nuxt version. I am not sure how to debug more.
Ok I found my mistake I did some custom parallel content fetching and updating with a watcher. Rewriting this to useAsyncData with a watch fixes this.
async function fetchData() {
const results = await Promise.all([
fetchSurround(),
fetchPage(),
fetchNavigation()
]);
// Update the reactive references
surround.value = results[0]?.map(doc => doc.navigation === false ? null : doc).map(doc => doc._path.startsWith(firstTwoSlugs.value) ? doc : null);
page.value = results[1];
navigation.value = results[2];
}
// fixed
const { data } = await useAsyncData('content', fetchData, { watch: [myRoute] })
// watch(myRoute, async () => {
// await fetchData()
// }, { immediate: true })
I just started a branch new nuxt project following the "Getting Started" guide and I was able to recreate this problem with Chrome. Everything works fine on Safari tho (haven't tried firefox).
Ended up Disabling Chrome Cache, which fixed the issue.
Environment:
- M3 Macbook Pro
- Node 20.15.0
- Nuxt 3.12.2
- Vue latest
- Chrome 126.0.6478.127 (Official Build) (arm64)
