net::ERR_CONTENT_LENGTH_MISMATCH 200
With no changes to my code and running the latest Node 22 (v22.14), my application is suddenly not served properly anymore. When running the
npm run dev command, everything boots up normally according to the console. However, when navigating to the site, I only get a blank page. Opening the dev tools reveals a bunch of errors like this:
I have upgraded nuxt to the latest version, but no change. I tried running dev with --host, but both localhost and 127.0.0.1 return the same error. Does anyone have any experience with this error?8 Replies
Hi @Tackleberry. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific information to directly address the
ERR_CONTENT_LENGTH_MISMATCH error you're experiencing. However, I can provide some insights and potential solutions based on similar issues reported in Nuxt:
1. Recent Vite Update: There have been reports of HMR (Hot Module Replacement) and other development server issues after recent updates to Nuxt and Vite. This might be related to your problem.
2. Allowed Hosts: Some users have reported issues with blocked requests due to new security measures in Vite. You might need to add your host to the allowed hosts list. Try adding this to your nuxt.config.ts:
3. HTTPS and Proxy Issues: If you're using HTTPS or a proxy for local development, you might need to adjust your configuration. Some users have reported issues with Apache and Nginx proxies after recent updates.
4. Downgrading or Using Nightly Build: As a temporary workaround, you could try downgrading Nuxt to a previous version or using a nightly build. As suggested in one of the issues, you could try:
5. Check for Virtual File System Issues: Some of the errors you're seeing relate to virtual file paths. There have been reports of issues with Nuxt's virtual file system after updates.
If these suggestions don't help, you might want to create a minimal reproduction of your issue and report it on the Nuxt GitHub repository. The development team is actively working on resolving issues related to recent updates.
Sources:
Github Issue: HMR broken
Github Issue: virtual:nuxt regression
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@615642942777851938> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai It appears every file that is for some reason served from the node_modules folder fails to load correctly. Are there any open issues on nuxt or vite regarding this?
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the information in the knowledge sources and your recent observation, there are indeed some open issues and discussions related to problems with serving files from the
node_modules folder in Nuxt and Vite. Here's what I found:
1. Vite Resolution Issues: There's an ongoing discussion about Vite's dependency resolution, which might be related to your problem. A recent pull request (PR) in the Nuxt repository aims to address this by using a custom resolveId function from vite-node. This PR is meant to fix several issues related to failed imports and resolutions.
Github Pull Request: fix(vite): use resolveId from vite-node to resolve deps
2. Multiple Related Issues: The PR mentioned above is linked to several issues that describe problems similar to what you're experiencing, including failures to resolve imports and load modules correctly.
3. CORS and File Loading Problems: There have been reports of CORS issues and problems loading files, especially after recent updates to Nuxt and Vite. These issues seem to affect files served from node_modules and virtual modules.
Github Issue: CORS issue for CSS files loaded via cdn url in nuxt 3
4. Virtual Module Resolution: Some users have reported problems with Nuxt's virtual file system and module resolution, which could be related to the issues you're seeing with files from node_modules.
Github Issue: Failed to resolve import "app-manifest"
While these issues don't exactly match your specific error message (ERR_CONTENT_LENGTH_MISMATCH), they do indicate ongoing problems with file serving and module resolution in recent versions of Nuxt and Vite.
If you're still experiencing this issue, you might want to:
1. Try the nightly build of Nuxt, which might include fixes for these problems.
2. Create a minimal reproduction of your issue and report it on the Nuxt GitHub repository, as it might be a new manifestation of these ongoing problems.
3. Keep an eye on the Nuxt and Vite GitHub repositories for updates on these issues and potential fixes in upcoming releases.
Remember that the Nuxt team is actively working on resolving these types of issues, so a fix might be available soon if it isn't already in the latest nightly build.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@615642942777851938> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai the page loads correctly in Firefox, it appears only Chrome has issues 🤔
Let me check the knowledge base for you again. One moment! :books:
----------------------
Thank you for providing that additional information. It's interesting that the issue only occurs in Chrome and not in Firefox. This browser-specific behavior could provide some clues about the nature of the problem. Based on the knowledge sources and our previous conversation, I can offer some insights:
1. Chrome-specific Issue: There's a reported Chrome bug that has been causing similar issues with detached nodes and memory leaks in Vue and Nuxt applications. This bug has been fixed in Chrome Beta version 133.0.6943.27, but it might still be present in the stable version you're using.
Github Issue: Detached nodes keep increasing indefinitely
2. Transition and Suspense: The issue might be related to the interaction between
Transition and Suspense components in Chrome. If your application uses these features, they could be contributing to the problem.
3. Chrome DevTools: Sometimes, having Chrome DevTools open can exacerbate or even cause certain issues. Try closing DevTools and see if the problem persists.
4. Cache and Hard Reload: Chrome's aggressive caching might be causing issues with loading the correct versions of files. Try performing a hard reload (Ctrl+Shift+R or Cmd+Shift+R) or clearing your browser cache.
5. Extensions: Chrome extensions, particularly those that modify network requests or page content, could interfere with Nuxt's operation. Try disabling all extensions and see if the issue resolves.
Given that the issue is Chrome-specific, it's less likely to be a fundamental problem with Nuxt or your code. However, if the problem persists, you might want to:
1. Update Chrome to the latest version, including Beta or Canary if you're willing to test.
2. Create a minimal reproduction of the issue focusing on the Chrome-specific behavior.
3. Report the issue to the Nuxt GitHub repository, mentioning the browser-specific nature of the problem.
Remember, the Nuxt team is actively working on resolving browser-specific issues, so keeping an eye on their GitHub repository for updates or similar reported issues could be helpful.
Github Issue: Detached nodes keep increasing indefinitely
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@615642942777851938> Kapa.ai is still learning and improving, please let me know how I did by reacting below.