Login/Register
Nuxt3 - `_nuxt`-directory not found (404) on GitHub Pages
Asked Answered
Solved nuxt.jsgithub-actionsgithub-pagesnuxt3.jsmjs
I

3

6

(I know it might sound similar to missing js files from _nuxt folder, but unfortunately, I was not able to understand the answer from there)

When I deploy my dist-folder to GitHub Pages, it contains

dist 
| _nuxt
  | css/main.css
  | entry.*******.css
  | entry-*******.mjs
  | index-*******.mjs
  | history-********.mjs
  | header-********.mjs
  | ... some other mjs-files
| css/main.css
| index.html
| history.html
| ... some other HTML-files

The HTML-pages are served, perfectly fine, and in the <head>-section, they want to load the modules (.mjs-files). All of these requests, unfortunately, fail with a 404:

Chrome console error I Chrome console error II

Why do the requests to the _nuxt-folder fail, while / and /css requests go through?

Edit: Just seen that in VS Code, this folder is just marked as a symlink to the .output/public-folder (generated by nuxi generate):

enter image description here.

Might that be the issue? But appears that it contains the files, anyway:

enter image description here

Edit II: I cannot run npm run start for local tests (node .output/server/index.mjs), because the .output/server folder is empty, as can be seen on the image:

enter image description here

When running the folder in Live Server (VS Code extension), the errors return:

enter image description here

Actually, after downloading the generated .tar-file (the artifact that is generated automatically by GitHub Actions for deployment) does not include the _nuxt-directory, but just the static HTML-files and css-directory as well as an assets dir with assets/css/main.css-file in it. Why is the _nuxt-directory ignored by the GitHub Action?

Intimist answered 21/4, 2022 at 9:18 Comment(2)
Does it work locally once built? – Victorvictoria
No, not through running npm run start (node .output/server/index.mjs), since the .output/server-folder is empty, only output/public folder has files in it, which are the same as in dist (=> symbolic link?), see Edit II – Intimist
I
2

As told here

It is now possible to completely bypass Jekyll processing on GitHub Pages by creating a file named .nojekyll in the root of your pages repo and pushing it to GitHub. This should only be necessary if your site uses files or directories that start with underscores since Jekyll considers these to be special resources and does not copy them to the final site.

This might answer the question, since the _nuxt-directory is prefixed with an underscore, it will be ignored by Jekyll builds. This means, adding a .nojekyll-file, should solve the issue, according to GitHub Blog.

The .nojekyll-file will obviously have to be placed in the directory that is deployed, in my case, since I am only deploying dist, it needed to be in nuxt's public-folder to be included in the dist-directory.

Intimist answered 22/4, 2022 at 10:55 Comment(1)
Please do not post link-only but actual text. Links can 404. – Victorvictoria
R
1

Add .nojekyll empty file to the public folder and run npm run generate.

Add the below snippet to defineNuxtConfig config

  target: 'static',
  router: {
    base: '/ repo name /', //eg:- /crstnmac.github.io/
  },

Use the below script to deploy your nuxt website to github pages

"deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"

Rockett answered 23/9, 2022 at 10:40 Comment(0)
H
1

Use .nojekyll and -t true

To deploy Nuxt3 (or any other project that happens to have folders starting with underscore, ie _nuxt) I had to do the below steps. For reference, previously Nuxt2's generate would make the .nojekyll file for you.

1. Create an empty file .nojekyll in the public folder

This inhibits Jekyll processing on Github pages, which then allows the _nuxt folder to make it to the final destination.

2. Use the flag -t true in the gh-pages command

package.json:

`"deploy": "gh-pages -d dist -t true"`

Without this flag, my .nojekyll file wasn't being deployed, even though it was in my public folder locally! You can confirm this by going to your Github repo (in a web browser) and change to the branch you're attempting to use as your gh-pages branch. Above, I'm using dist as my gh-pages branch.

Houston answered 11/3, 2023 at 23:21 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.