Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH with VS Code Devcontainer

[ddahan]

Environment

Nuxt 3.7+

Reproduction

Note: the exact same codebase on Stackblitz works (including same node/npm versions), I suspect this is somehow related to my local environment. Here is below a repository reproduction containing a VS Code dev container:

Reproduction steps

• Install Docker (I'm using Docker Desktop for Mac)
• Install VS Code and VS Code Dev Container extension
• Open VS Code, run the Clone Repository in Container Volume command, providing this url: https://github.com/ddahan/nuxt-starter-dev-container
• Once the container is installed, run npm run dev in a terminal, and open Chrome Browser with the localhost url link.
• Open the inspector, this should display the ERR_CONTENT_LENGTH_MISMATCH error.

Describe the bug

I have 3 projects running Nuxt (3.5 and 3.6). After upgrading any of them to Nuxt 3.7, I get an net::ERR_CONTENT_LENGTH_MISMATCH error in the browser when loading the page. The error happens on different potential files, and the site is basically unusable (not loaded completely, not clickable, etc.).

I'm using VS Code dev containers, which means the browser I'm using locally connects to a Docker container using port forwarding.

• I tried using 3 local browsers but the error is the same.
• I tried to run the server with the --host option but I got the same error.
• I ensured there is enough space disk on my container

Any idea of what could have happened? I read the Nuxt 3.7 changelog and it seems there are many low-level changes that could explain this, but I'm not competent enough to understand.

Thanks.

EDIT: video added
https://github.com/nuxt/cli/assets/1933516/77acf4ce-411f-4493-85ad-5f8feb5b3467

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[danielroe]

I believe the issue is upstream in nuxt/cli, and may already have been fixed. Would you try with v3.8.3?

[pi0]

By any chance are you using an endpoint with DELETE method? (because it is a known issue -- however not new one)

[ddahan]

I believe the issue is upstream in nuxt/cli, and may already have been fixed. Would you try with v3.8.3?

@danielroe I'm already on latest versions (Nuxt 3.7.3 and Nuxi 3.8.3) and the error still occurs. I added a video in the issue description and refreshed the page multiple times to show how the error is displayed.

I also ensured there is enough space disk on my container.

[ddahan]

By any chance are you using an endpoint with DELETE method?

I may have some DELETE endpoints but the error occurs before reaching them. On any website I tried, the error occurs at index page loading. By the way, one of the repository is a fork of Nuxt UI so it should work.

[ddahan]

Side question: if I'm able to build a minimal reproduction repository containing a VS Code .devcontainer file, are you able to run it? (you'd need VS Code and Docker Desktop for this).
I'm asking because I suspect the problem can't be reproduce on a local environment.

[pi0]

Yes, docker env / devcontainer is even better!

[or2e]

related: #118

[ddahan]

@pi0 @danielroe
I created a minimal repository containing a .devcontainer file for reproduction (see the initial updated issue).
Are you able to reproduce the issue? Thanks!

[pi0]

Thanks! yes I can reproduce it. Seems coming from the vite handler.

GET http://127.0.0.1:3000/_nuxt/node_modules/.cache/vite/client/deps/vue-router.js?v=38dcfad8 net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

CLI warning might be related:

[Vue Router warn]: No match found for the location with path "/_nuxt/@vite/client"

Something to add is if you open the network tab and disable the cache, this issue will be gone. (this might be simply a warmup cache timing issue)

/cc @antfu Do you have any guesses?

[ddahan]

Any update on this?

The error actually breaks any repository using Nuxt (like Nuxt UI).
I tried to disable the cache but it has no effect.