netlify preset support for custom baseURL

[issue-up]

Forwarded from downstream issue: MIME/404 error on build/generate with app.baseURL configuration option nuxt/nuxt#22225 by @michaelvcolianna

Environment

---

• Operating System: Darwin
• Node Version: v20.2.0
• Nuxt Version: 3.6.3
• Nitro Version: 2.5.2
• Package Manager: npm@9.6.6
• Builder: vite
• User Config: app, devtools
• Runtime Modules: -
• Build Modules: -

---

Reproduction

Works with dev OR build & preview: https://stackblitz.com/github/michaelvcolianna/nuxttest?file=nuxt.config.ts
Deploy, not working: https://sparkling-mandazi-64484f.netlify.app/test
Repo: https://github.com/michaelvcolianna/nuxttest

Edited to add a URL using npm run generate to illustrate the 404s: https://nuxt.mvcdev.net/

Describe the bug

This feels like this is a Nuxt configuration thing. I guess it could be Netlify but wanted to check here first.

I'm experiencing an error similar to nuxt/nuxt#14817, but npm run build && npm run preview work fine locally and on Stackblitz. When deployed, though, either on Netlify or using npm run generate and serving the dist folder, an error shows up.

This is because the files don't exist. When building, the baseURL ("test" for now) is appended before the "_nuxt" part of the resource.

The Netlify deployment is looking for https://sparkling-mandazi-64484f.netlify.app/test/_nuxt/entry.624150a5.js, which is the MIME error because of the catchall serving it as a real page. It should be looking for https://sparkling-mandazi-64484f.netlify.app/_nuxt/entry.624150a5.js.

Serving from dist is looking for localhost:8081/test/_nuxt/entry.a65c34ed.js, which is a 404 since the SSG crawler doesn't create the file. It should be looking for localhost:8081/_nuxt/entry.a65c34ed.js.

(I know those file names aren't set in stone but hopefully they get the point across.)

Additional context

First, this issue happened prior to using the catchall. I tried a base Nuxt instance with the app.vue file, then converted that to use <NuxtPage> and made pages/index.vue but switched to the catchall to show the MIME error instance. Without the catchall the JS files 404 because root cause is they don't exist in the requested location. (Plus, down the line, the final site will need the catchall anyway.)

I've tried adjusting Nuxt config settings, like app.buildAssetsDir and vite.build.assetsDir. In either case, it wouldn't let me use a relative path - since I wanted to remove the baseURL from the request I tried ../ and just an empty string. I also tried adding "test" in there, but then it was looking for files in /test/test/_nuxt.

I've also tried adjusting stuff on the Netlify side. For serving after SSG, I've tried configuring aliases/etc. on the web server side.

I feel like this is a really simple solution I'm overlooking and someone will see it right away. I'm hoping it isn't put everything under the desired baseURL in the pages directory, but if that's the best way to achieve it then I'll do that. Thanks for any insight!

Logs

Browser console for Netlify deploy:
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. entry.624150a5.js:1
- Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. _...slug_.8187cdda.js:1

Browser console for SSG:
- Failed to load resource: the server responded with a status of 404 (Not Found) entry.a65c34ed.js:1
- Failed to load resource: the server responded with a status of 404 (Not Found) _...slug_.b619b6b1.js:1

[PichlerJoh06]

any news here? facing the same problem serving over docker container on a domain in a sub-path like:

• my-domain.com/my-nuxt-app-1
• my-domain.com/my-nuxt-app-2
• my-domain.com/my-nuxt-app-3

[gavmck]

This is awkward, I've just spent a month upgrading a site to vue/nuxt 3 to find out I can't ship it to subfolders on netlify.

edit: I've written a node script that runs post build to dump everything in the folder where the routes think it is.

[exophunk]

This was a supported feature in Nuxt 2.
Same as @gavmck, we're at the end of a 6 month dev phase to find out Nuxt 3 is not supported anymore in a subfolder on netlify?

• There should be at least a huge red warning in the Nuxt/Nitro docs, saying baseUrl is not supported for netlify.
• Does this bug also affect other solutions like Vercel?

@gavmck can you maybe share your node script that you used on netlify? And where/how do you run this?

[gavmck]

@exophunk Here you go. We haven't gone to prod, yet but it seems to work on deploy previews. We run it as part of the build command right after the build finishes.

// The build needs to go from /dist/ into /dist/${env.SITE_CODE} or it doesn't work on netlify
// This script moves the build to the correct location
const fs = require('fs')

const siteCode = process.env.SITE_CODE

if (!siteCode) {
  throw new Error('SITE_CODE is not defined')
}

const source = process.env.DIST_SOURCE || 'dist'

if (!fs.existsSync(source)) {
  throw new Error(`Source directory ${source} does not exist`)
}

const destination = `${source}/${siteCode}`

if (fs.existsSync(destination)) {
  throw new Error(`Destination directory ${destination} already exists`)
}

fs.mkdirSync(destination)

fs.readdirSync(source).forEach((file) => {
  if (file !== siteCode) {
    fs.renameSync(`${source}/${file}`, `${destination}/${file}`)
  }
})

[exophunk]

The paths are correct, the problem is that the assets are not there. When specifying baseUrl, this should be re-created in .output/public/ folder. e.g. baseUrl=/test/ should store ouput at .output/public/test/

Because nuxt correctly looks for .../test/_nuxt/abc123.js, but the files are actually at .output/public/_nuxt/abc123.js.

This is not only a Netlify issue, but the same for Cloudflare Pages (and I assume most other hosting solutions too). It somehow works with nuxi start but for me, both netlify and cloudflare pages (including hub.nuxt.com) do not work

At the moment, the nuxt config describes a baseURL option, but that simply does not work beyond local development.
It works with the custom netlify plugin (manually move folders), but I don't know how to do this for other services.

Shouldn't baseUrl work for nuxt?

[atinux]

I think the fix should be similar to https://github.com/unjs/nitro/pull/2464/files if someone wants to take a stab at it

Regarding Cloudflare I opened #2821

[rijkvanzanten]

I wish I had found this issue hours earlier, I would've invested the time in a PR instead of yelling at netlify 🥲

I've tried countless things ranging from trying to force nitro into another preset, changing the buildAssetsDir, and futzing with a bunch of other settings. The closest I got was that it would generate the _nuxt folder double nested under the baseURL, but only sporadically (I think there's a magic combo of cache + setting change that triggered it to break somewhat correctly).

To @exophunk's point, it'd be incredibly helpful to have a big warning notice somewhere indicating that baseURL cannot be used when the build is run on Netlify.

As of right now, this is my workaround:

Instead of having Netlify build my repo, I instead build the website locally first, and then upload it manually with netlify deploy. Not ideal, but at least it allows me to ship this website with only 4 hours of delay 😅

[rijkvanzanten]

I'm happy to prep the PR to fix this in a similar way you did for the Vercel one @danielroe, but I'm also curious: Is there any way to opt-out of Nitro's magic here altogether? If not, is it worth spinning up a new feature request somewhere to make that a config flag? In this case, my workaround "solution" is basically just to prevent Nitro from being able to recognize netlify 🤔