-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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
Use Netlify DEPLOY_URL to avoid missing chunks #20950
Comments
I will have a crack at trying this (outside the preset) to see if it works, and then report back. |
How about this? export default defineNuxtConfig({
$production: {
app: {
cdnURL: process.env.DEPLOY_URL
}
}
}) |
@danielroe Would that embed the value at build time? It's not available in Netlify at runtime. |
Yes, it would. |
Thank you, it's kind of you to give me the exact incantation to try. It looks promising, though I've not tested it live yet, only on a Netlify branch build. Initially I got CORS errors fetching the chunks, which I worked around with a
Will report back further once I dare apply it to the live site. |
You should also be able to set those headers in your nuxt config: export default defineNuxtConfig({
$production: {
app: {
cdnURL: process.env.DEPLOY_URL
},
routeRules: {
'/_nuxt/**': {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
}
}
}
}
}) |
@danielroe This seems to work very nicely. Perhaps worth documenting this kind of solution, even if you don't think it's suitable as the default Netlify behaviour? I'm still seeing some preload errors, e.g.
This is a bit odd, as the files exists. So perhaps that's a network error on the client. Does Nuxt have retries for loading? |
Just pointing out that it's for the |
I think that this is ingenious, but too specific to a use-case to be enabled by default. Users may not want JS being fetched from a different domain than their site, or they may wish their site to be reloaded. I'm going to close this but feel free to open a documentation PR - it could likely live in nitro docs for both Vercel + Netlify. |
For anyone else interested in this. We need to be slightly more ingenious, because in the wild it turns out that some security software (e.g. Streamline3) blocks the script loads because they are from an odd looking domain (your domain at Netlify) and not from the domain of the site you loaded. So here's a revised version. In
That means we'll get JS chunks of the form Then in Netlify's
That means we get the benefits of the build id being embedded into the assets, so that we we don't have the issue with chunks becoming invalid after a new deploy, but without the suspicious aspect of loading JS from another domain. |
Docs PR created: unjs/nitro#1300 |
Great! |
Describe the feature
Netlify uses atomic deploys, which means that when a deployment occurs, the old chunks disappear. This causes errors which Nuxt currently works around by reloading if a chunk is missing on a route. #19086 has discussion about this, and you can force reloads in all circumstances as per the end of that discussion.
But reloads are bad UX. Netlify exposes a
DEPLOY_URL
environment variable at build time which gives a permanent link to that build. Nuxt hascdnUrl
/NUXT_APP_CDN_URL
which can be used to serve assets from another url. https://answers.netlify.com/t/netlify-functions-and-env-variables-from-netlify-toml/4404/13 has an example of saving this off at build time and using it at run time (it's not available at run time within Netlify, sadly).Could we not do this in the Netlify preset so that when we fetch chunks we always fetch chunks from the same build version as the code we are already running? This might avoid the missing chunks problem entirely.
Additional information
Final checks
The text was updated successfully, but these errors were encountered: