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

ddahan · 2023-09-13T22:43:52Z

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

The text was updated successfully, but these errors were encountered:

github-actions · 2023-09-13T22:44:08Z

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:

danielroe · 2023-09-13T22:45:29Z

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

pi0 · 2023-09-13T22:59:47Z

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

ddahan · 2023-09-13T23:15:14Z

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 · 2023-09-13T23:18:58Z

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 · 2023-09-13T23:23:07Z

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 · 2023-09-13T23:40:00Z

Yes, docker env / devcontainer is even better!

or2e · 2023-09-14T06:39:32Z

related: #118

ddahan · 2023-09-14T09:02:46Z

@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 · 2023-09-14T09:17:03Z

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 · 2023-09-23T18:06:25Z

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.

max06 · 2023-10-02T19:23:08Z

I need to chime in here - exact same scenario.

Latest nuxt/nuxi in a freshly created devcontainer. Also with Nuxt UI.

To add some observations here: It doesn't always fail and it's not always the same ressource. This one failed at:

Loading the file directly shows a size of 191kB when it works and 130kB if it doesn't. Fetching that file using curl from inside the container works fine. Since devcontainer ports aren't actually real docker forwarded ports, I'd suspect vscode to cause the issues here.

ddahan · 2023-10-02T19:28:09Z

I'd like to add that it fails even without nuxt UI for me.
For me it always fails, but indeed, not always with the same file(s).

As it still works with nuxt 3.6, I'm wondering what change in the 3.7 could explain this VS Code dev container incompatibility.

max06 · 2023-10-02T19:48:25Z

Also worth mentioning: vscode recently updated to nodejs 18. It's not the first issue caused by that update.

max06 · 2023-10-02T19:58:07Z

As it still works with nuxt 3.6,

It took a while to process this bit... do you mean nuxt 3.6 works fine with the current vscode release?

ddahan · 2023-10-02T20:05:25Z

Yep.

No problem with this VS Code and Nuxt 3.6.5 (and latest nuxt UI)

max06 · 2023-10-02T22:21:21Z

I was able to trace the issue down to

root@463d9cf38f77:/workspaces/nuxt# git bisect bad
abd5d857705fa830d6ef019cb8a5ed3c763b7cd5 is the first bad commit
commit abd5d857705fa830d6ef019cb8a5ed3c763b7cd5
Author: Daniel Roe <daniel@roe.dev>
Date:   Fri Aug 25 16:20:32 2023 +0100

    feat(nuxt): migrate to new `nuxt/cli` (#22799)

Let's see if that helps in finding the issue...

ddahan · 2023-10-02T22:47:27Z

For the diff -> nuxt/nuxt@abd5d857705fa830
Basically this commit is related to a full rewrite of the nuxt CLI using another framework (unjs/citty).

max06 · 2023-10-02T23:04:00Z

I'm not sure if I can bisect my way through that one without having a direct check... I'd need a way to distinguish between bad because our issue and bad because incompatible with nuxt.

(Rephrasing: I'd need a good state as a starting point)

or2e · 2023-10-02T23:35:30Z

Fingers crossed
P.s. we've given up on .devcontainer for now.

ddahan · 2023-10-03T08:54:24Z

we've given up on .devcontainer for now.

@or2e just curiosity: why not keep devcontainers and stick to Nuxt 3.6.5 in the meantime?
Dev containers are so important to me, that I'll prefer go to React if never solved 😃

pi0 · 2023-10-03T08:59:50Z

Hi again. Sorry hearing you still have issues with DevContainers. It is something we should investigate and fix for CLI proxy.

In the meantime, have you tried with nuxt dev --no-fork? It might fix possible issues.

ddahan · 2023-10-03T09:55:23Z

have you tried with nuxt dev --no-fork

@pi0 It just creates another error: [GET] "http://[::]:3000/__nuxt_vite_node__/manifest": fetch failed

As a reminder, I provided a reproduction repo with a devcontainer file.
Do you need anything else to help investigate? (time, I guess ? ^^)

max06 · 2023-10-03T09:57:18Z

Hello @pi0 and good morning,

since I'm no developer - can you tell me in a handful of steps how I can replace the cli in my nuxt development version with a local clone of this repo, so I can use git bisect on it? If the earliest possible commit (roughly around the time the cli was replaced in nuxt) doesn't show the current issue or prolonged loading times, I'm probably able to identify the commit which started this issue.

If it helps, I'm on your discord server, I just can't dm you. Look for "Flo".

max06 · 2023-10-03T14:34:05Z

root@463d9cf38f77:/workspaces/nuxt# npx nuxi-edge@3.9.1-1696342776.a6acb6a dev --no-fork
Nuxt 3.7.4 with Nitro 2.6.3                                                2:33:35 PM

[2:33:35 PM]  ERROR  Error: Cannot find module @nuxt/kit imported from file:///workspaces/nuxt, file:///workspaces/, file:///workspaces/nuxt/_index.js, file:///workspaces/node_modules

  at resolvePath (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.4354f916.mjs:7954:10)
  at importModule (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.0458f9cb.mjs:11:30)
  at loadKit (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.e7cda0de.mjs:9164:21)
  at async Object.run (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/chunks/dev.mjs:173:32)
  at async runCommand$1 (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.77fb2b26.mjs:1647:7)
  at async runCommand$1 (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.77fb2b26.mjs:1638:11)
  at async runMain$1 (/root/.npm/_npx/9bcd1de19fdfa663/node_modules/nuxi-edge/dist/shared/nuxi-edge.77fb2b26.mjs:1770:7) 



[2:33:35 PM]  ERROR  Error: Cannot find module @nuxt/kit imported from file:///workspaces/nuxt, file:///workspaces/, file:///workspaces/nuxt/_index.js, file:///workspaces/node_modules

Tried it in the nuxt devcontainer...

pi0 · 2023-10-03T14:39:09Z

Is /workspaces/nuxt a valid Nuxt project? (This command should be run when you are in the directory of an installed Nuxt project to work properly) -- also dependencies in node_modules being installed

max06 · 2023-10-03T14:42:29Z

Ah, my bad. Executing in a starter project seems to work. Loading time is down to 1 second, compared to the 60 seconds it took before. No request issues seen so far.

Do you have a solution in mind for the --no-fork-option?

pi0 · 2023-10-03T14:49:02Z

Loading time is down to 1 second, compared to the 60 seconds it took before. No request issues seen so far.

Awesome!

Do you have a solution in mind for the --no-fork-option?

Yes. However not %100 sure if it resolves same root cause but to overcome internal networking issues, i plan to use IPC Sockets from main process to child. It works well for another proxy layer (Nitro) so I'm hopeful.

-- If it doesn't works well, i think in short term we can enable this flag by default for Docker environments (already enabled for Test and Bun)

max06 · 2023-10-03T14:50:30Z

That sounds good!

Is there anything we should report to vscode, anything they can or have to fix to not need workarounds anymore? Otherwise I'd close the issue I opened for that.

pi0 · 2023-10-03T14:51:51Z

I think VSCode side should be fine as far as i tested. Root cause is mostly Docker networking issues With Node.js/IPv6... Thanks for following up btw!

max06 · 2023-10-03T14:54:05Z

No worries, I'm here to help as much as I can. And I seem to attract bugs whenever I touch something 😅

I probably should have mentioned my docker containers are ipv6 enabled. However I'm totally fine if everything inside docker uses ipv4.

And before I forget it: Thank you very much for your quick fix!

ddahan · 2023-10-03T15:59:25Z

@max06 @ddahan Can you please try latest change via npx nuxi-edge@3.9.1-1696342776.a6acb6a dev --no-fork in your project? 🙏🏼

@pi0 it removes the main error 🙏🏼 thanks for your help!

(Sorry I had a cross bug that seems related to Nuxt UI popper.js dependency in the middle of my tests, which complicated everything).

ddahan · 2023-10-21T23:38:33Z

Hi there! Same issue with nuxt 3.8.0 unfortunately.
Any progression on this?

Is there anything I can do/try to help debugging?
Thanks for your help @pi0

ddahan · 2023-10-25T09:51:07Z

@rstainsby I'm not sure you're issue is the one I described.
Mine is not related to fetch or delete method. It happens on any project even on a hello world.

rstainsby · 2023-10-26T00:16:00Z

Apologies, I was looking at several issue relating to CONTENT_LENGTH_MISMATCH and I posted that comment under the wrong one. Thanks for letting me know.

Suniron · 2023-11-02T10:06:49Z

Same, i have this error ERR_CONTENT_LENGTH_MISMATCH in browser console.

I'm using devcontainer under Windows 11 WSL2 (Ubuntu).

I got also sometimes this error: Uncaught (in promise) DOMException: Cache.put() encountered a network error.

These errors only appears on my Nuxt Bridge app, my Nuxt 3 app (in the same monorepo) is OK

jeanmatthieud · 2023-11-13T16:28:03Z

Waouuu... I was using Nuxt3 for a project for a while with devcontainers, and it was painfully slow (compared to Nuxt2), with a initial load time (under Chrome) often over a minute (worse than @max06), but I never found anyone speaking directly of this issue, and did with it.

I recently had lot more ERR_CONTENT_LENGTH_MISMATCH errors (after upgrading Nuxt and all dependencies), and the dev was impossible.
I added the --no-fork option to the dev command. The website is now loaded in less that 5 seconds, and the err content length mismatch disappeared!
After a while dealing with this long loading time, it feels like magic 🧙‍♂️!

Suniron · 2023-11-13T16:38:56Z

With your suggestion, i got this error :/

[GET] "http://[::]:3003/__nuxt_vite_node__/manifest": fetch failed

jeanmatthieud · 2023-11-14T08:22:23Z

These errors only appears on my Nuxt Bridge app, my Nuxt 3 app (in the same monorepo) is OK

I tried to migrate from Nuxt2 to Nuxt Bridge (before Nuxt3), but it was a nightmare, with all the dependencies.
I re-created a project with Nuxt3 from scratch, and migrated the code as quick as possible. It was not an easy task...

Nefcanto · 2023-11-14T09:29:40Z

We're getting this error in Vite + React. It seems that this error is not related to a specific framework. It might be something related to the container, or maybe even the linux, or even Chrome.

marcotuna · 2023-12-17T07:07:01Z

Same problem here. Not using nuxt, however I am using React + Vite while port forwarding using VSCode. Accessing using the direct url works, using port forward, doesn't.

leo-hardy · 2024-02-12T18:03:06Z

Hi, I had the same issue as @marcotuna and it turned out that the problem was VSCode port forwarding. Forwarding the port with my ssh config solved it

omencat · 2024-02-12T22:01:17Z

@leo-hardy yeah, I confirmed that worked as well. my workaround was to use the --no-fork flag on dev command.

fwiw, this is my working .devcontainer/devcontainer.json. The result is the same for nvm/volta/npm, I only switched to bun for troubleshooting.

{
  "name": "Node.js & TypeScript",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm", // bookworm is the aarm64 version of the image
  "features": {
    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
  },

  "forwardPorts": [3000],
  "postCreateCommand": "bash -i -c 'curl -fsSL https://bun.sh/install | bash && source ~/.bashrc && bun i && bun dev'",
  "postStartCommand": "bash -i -c 'bun dev'",
  "customizations": {
    "vscode": {
      "extensions": [
        "Vue.vscode-typescript-vue-plugin",
        "Vue.volar",
        "bradlc.vscode-tailwindcss"
      ]
    }
  },

}

edit: this was running nuxt 3.10.0 btw

haliliceylan · 2024-02-27T12:51:20Z

Its only happening to me on nuxt dev mode, If I use nuxt build then use node .output/server/index.mjs no problem.

max06 · 2024-02-27T16:28:52Z

Hey @pi0 - how's the change for --no-fork going? I forget about that switch most of the times... 😅

mmarteauWoop · 2024-05-13T17:43:55Z

For me, the trick was to expose port via docker-compose.yml instead of using native vscode functionnality of trying to forward ports when they come up.

Sometimes the --no-fork works, sometimes the vite middlewareMode does the trick. Today, this is how I've solved it 😄

MrAnyx · 2024-05-23T20:10:30Z

Hi again. Sorry hearing you still have issues with DevContainers. It is something we should investigate and fix for CLI proxy.

In the meantime, have you tried with nuxt dev --no-fork? It might fix possible issues.

Actually, adding --no-fork at the end of the nuxt command did the job. In addition to this, my application also load much faster (like 5x faster)

Xyrai · 2024-05-24T07:58:40Z

The --no-fork definitely seems to help with the ERR_CONTENT_LENGTH_MISMATCH, will this eventually get changed in the future so that it is integrated within the nuxt dev command itself without the fork option?

haliliceylan · 2024-05-27T12:18:11Z

Its only happening to me on nuxt dev mode, If I use nuxt build then use node .output/server/index.mjs no problem.

also I stopped using vscode port forwarding and using docker-compose native ports option, it is also major factor.

danielroe added the needs reproduction label Sep 13, 2023

danielroe transferred this issue from nuxt/nuxt Sep 13, 2023

danielroe removed the needs reproduction label Sep 14, 2023 — with Volta.net

ddahan mentioned this issue Oct 2, 2023

Duplicated imports warning when running dev server nuxt/ui#629

Closed

ddahan changed the title ~~Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH~~ Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH with VS Code Devcontainer Oct 2, 2023

max06 mentioned this issue Oct 3, 2023

DevContainers: net::ERR_CONTENT_LENGTH_MISMATCH through forwarded ports microsoft/vscode-remote-release#9056

Closed

pi0 added docker vscode labels Oct 3, 2023

or2e mentioned this issue Oct 8, 2023

3.7.0 - net::ERR_CONNECTION_RESET 200 [WSL2, Docker] #118

Closed

ddahan mentioned this issue Oct 26, 2023

Nuxt UI Pro preview before paying for early access? nuxt/ui#872

Closed

masat7353 referenced this issue in masat7353/sample-nuxt-devcontainer Jan 4, 2024

devContainerでdevサーバーを起動した際にレスポンスが遅くならないように修正

cb23c10

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

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

Comments

ddahan commented Sep 13, 2023 • edited

Environment

Reproduction

Reproduction steps

Describe the bug

github-actions bot commented Sep 13, 2023

Why do I need to provide a reproduction?

What will happen?

How can I create a reproduction?

danielroe commented Sep 13, 2023

pi0 commented Sep 13, 2023

ddahan commented Sep 13, 2023

ddahan commented Sep 13, 2023

ddahan commented Sep 13, 2023 • edited

pi0 commented Sep 13, 2023

or2e commented Sep 14, 2023

ddahan commented Sep 14, 2023 • edited

pi0 commented Sep 14, 2023 • edited

ddahan commented Sep 23, 2023

max06 commented Oct 2, 2023

ddahan commented Oct 2, 2023 • edited

max06 commented Oct 2, 2023

max06 commented Oct 2, 2023

ddahan commented Oct 2, 2023

max06 commented Oct 2, 2023

ddahan commented Oct 2, 2023

max06 commented Oct 2, 2023 • edited

or2e commented Oct 2, 2023

ddahan commented Oct 3, 2023 • edited

pi0 commented Oct 3, 2023

ddahan commented Oct 3, 2023

max06 commented Oct 3, 2023

max06 commented Oct 3, 2023

pi0 commented Oct 3, 2023 • edited

max06 commented Oct 3, 2023

pi0 commented Oct 3, 2023 • edited

max06 commented Oct 3, 2023

pi0 commented Oct 3, 2023

max06 commented Oct 3, 2023 • edited

ddahan commented Oct 3, 2023

ddahan commented Oct 21, 2023

ddahan commented Oct 25, 2023

rstainsby commented Oct 26, 2023

Suniron commented Nov 2, 2023

jeanmatthieud commented Nov 13, 2023

Suniron commented Nov 13, 2023

jeanmatthieud commented Nov 14, 2023

Nefcanto commented Nov 14, 2023

marcotuna commented Dec 17, 2023

leo-hardy commented Feb 12, 2024

omencat commented Feb 12, 2024 • edited

haliliceylan commented Feb 27, 2024

max06 commented Feb 27, 2024

mmarteauWoop commented May 13, 2024

MrAnyx commented May 23, 2024

Xyrai commented May 24, 2024

haliliceylan commented May 27, 2024

ddahan commented Sep 13, 2023 •

edited

ddahan commented Sep 13, 2023 •

edited

ddahan commented Sep 14, 2023 •

edited

pi0 commented Sep 14, 2023 •

edited

ddahan commented Oct 2, 2023 •

edited

max06 commented Oct 2, 2023 •

edited

ddahan commented Oct 3, 2023 •

edited

pi0 commented Oct 3, 2023 •

edited

pi0 commented Oct 3, 2023 •

edited

max06 commented Oct 3, 2023 •

edited

omencat commented Feb 12, 2024 •

edited