-
Notifications
You must be signed in to change notification settings - Fork 60
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH with VS Code Devcontainer #181
Comments
Would you be able to provide a reproduction? 🙏 More infoWhy 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 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 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: |
I believe the issue is upstream in nuxt/cli, and may already have been fixed. Would you try with v3.8.3? |
By any chance are you using an endpoint with |
@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. |
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. |
Side question: if I'm able to build a minimal reproduction repository containing a VS Code |
Yes, docker env / devcontainer is even better! |
related: #118 |
@pi0 @danielroe |
Thanks! yes I can reproduce it. Seems coming from the vite handler.
CLI warning might be related:
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? |
Any update on this? The error actually breaks any repository using Nuxt (like Nuxt UI). |
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. |
I'd like to add that it fails even without nuxt UI for me. 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. |
Also worth mentioning: vscode recently updated to nodejs 18. It's not the first issue caused by that update. |
It took a while to process this bit... do you mean nuxt 3.6 works fine with the current vscode release? |
I was able to trace the issue down to
Let's see if that helps in finding the issue... |
For the diff -> nuxt/nuxt@abd5d857705fa830 |
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) |
Fingers crossed |
@or2e just curiosity: why not keep devcontainers and stick to Nuxt 3.6.5 in the meantime? |
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 |
@pi0 It just creates another error: As a reminder, I provided a reproduction repo with a devcontainer file. |
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". |
Tried it in the nuxt devcontainer... |
Is |
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 |
Awesome!
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) |
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. |
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! |
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! |
@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). |
Hi there! Same issue with nuxt 3.8.0 unfortunately. Is there anything I can do/try to help debugging? |
@rstainsby I'm not sure you're issue is the one I described. |
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. |
Same, i have this error I'm using devcontainer under Windows 11 WSL2 (Ubuntu). I got also sometimes this error: These errors only appears on my Nuxt Bridge app, my Nuxt 3 app (in the same monorepo) is OK |
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. |
With your suggestion, i got this error :/
|
I tried to migrate from Nuxt2 to Nuxt Bridge (before Nuxt3), but it was a nightmare, with all the dependencies. |
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. |
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 |
@leo-hardy yeah, I confirmed that worked as well. my workaround was to use the 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 |
Its only happening to me on |
Hey @pi0 - how's the change for |
For me, the trick was to expose port via Sometimes the --no-fork works, sometimes the vite |
Actually, adding |
The |
also I stopped using vscode port forwarding and using docker-compose native ports option, it is also major factor. |
My 2 cents: (1) Use a ARG VARIANT=18-bullseye
FROM mcr.microsoft.com/devcontainers/typescript-node:${VARIANT}
# Install global commands: pnpm, vercel, eslint
RUN npm install -g eslint vercel pnpm \
&& npm cache clean --force > /dev/null 2>&1
# listen on all interfaces inside the container
ENV HOST=0.0.0.0 Important: add environment variable "HOST=0.0.0.0" to the image (2) Build the image in the {
"name": "NodeJS",
"build": {
"dockerfile": "Dockerfile",
"args": {
"VARIANT": "18-bullseye"
}
},
"customizations": {
"vscode": {
"extensions": [
"GraphQL.vscode-graphql-syntax",
"GraphQL.vscode-graphql",
"Nuxtr.nuxtr-vscode",
"bradlc.vscode-tailwindcss",
"rangav.vscode-thunder-client",
"Vue.volar",
"eamodio.gitlens",
"ms-vscode.live-server"
],
"settings": {
"prettier.enable": false,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml"
],
"livePreview.serverRoot": "./.vercel/output/static/",
"livePreview.openPreviewTarget": "External Browser"
}
}
},
"appPort": 4111,
"remoteUser": "node"
} Important: use "appPort" instead of "forwardPorts" Note: I use the package "@antfu/eslint-config", which is responsible for most vscode settings. Just have a look at @antfu/eslint-config. I think you can configure VSCode as you like - didn't correspond to this issue. (3) For reference my package.json: {
"name": "eoffice",
"type": "module",
"private": true,
"scripts": {
"dev": "nuxt dev --no-qr -p 4111",
"build": "nuxt build",
"generate": "nuxt generate",
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@vee-validate/zod": "^4.13.2",
"nuxt-graphql-client": "^0.2.36",
"resend": "^3.5.0",
"vee-validate": "^4.13.2",
"vue-matomo": "^4.2.0",
"zod": "^3.23.8"
},
"devDependencies": {
"@antfu/eslint-config": "^2.26.0",
"@nuxtjs/i18n": "8.4.0",
"@nuxtjs/robots": "^4.0.2",
"@nuxtjs/sitemap": "^5.3.5",
"@nuxtjs/tailwindcss": "^6.12.1",
"@pinia/nuxt": "^0.5.3",
"@tailwindcss/forms": "^0.5.7",
"@tailwindcss/typography": "^0.5.14",
"nuxt": "^3.12.4",
"pinia": "^2.2.2",
"vue": "^3.4.38",
"vue-datocms": "^7.0.5",
"vue-router": "^4.4.3"
}
} Hope this setup helps in some way. |
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
Clone Repository in Container Volume
command, providing this url: https://github.com/ddahan/nuxt-starter-dev-containernpm run dev
in a terminal, and open Chrome Browser with the localhost url link.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.
--host
option but I got the same error.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: