nuxt.jsgithub-actionsgithub-pagesnuxt3.jsmjs

Nuxt3 - `_nuxt`-directory not found (404) on GitHub Pages

(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?

Solution

  • 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.