javascript reactjs github deployment vite

npm error code EUSAGE when uploading react+vite project to GitHuB

Firstly here is the project repository where the error is occuring: https://github.com/tdM05/tdM05.github.io

I'm trying to deploy my website that I made with React+Vite to GitHub Pages and I keep getting a blank page (that isn't error 404) and ever since I added the deploy.yml file which is in the .github\workflows folder, I would get an error when pushing my commits to github. I added that file because that is what seemed like I should do from what I've read and I was getting a blank page before this.

Right now when I push to github, there is an error when github tries building it during the "install dependencies" phase. Here is the full error:

Run bahmutov/npm-install@v1
running npm-install GitHub Action
trying to restore cached NPM modules
cache key npm-linux-x64-f49928ddd0b76d21d99280ed45df323cea9587a11260ad9b9d67a7a11ca1895408c30700e1d2bbd849607dd72dd268408f86a41aba4ff79a9782a0ddb0a893c5
restore keys [
  'npm-linux-x64-f49928ddd0b76d21d99280ed45df323cea9587a11260ad9b9d67a7a11ca1895408c30700e1d2bbd849607dd72dd268408f86a41aba4ff79a9782a0ddb0a893c5',
  [length]: 1
]
input paths [ '/home/runner/.npm', [length]: 1 ]
npm cache miss
installing NPM dependencies
npm at "/opt/hostedtoolcache/node/18.20.4/x64/bin/npm"
/opt/hostedtoolcache/node/18.20.4/x64/bin/npm ci
npm error code EUSAGE
npm error
npm error `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm error
npm error Missing: @types/three@0.167.2 from lock file
npm error
npm error Clean install a project
npm error
npm error Usage:
npm error npm ci
npm error
npm error Options:
npm error [--install-strategy <hoisted|nested|shallow|linked>] [--legacy-bundling]
npm error [--global-style] [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm error [--include <prod|dev|optional|peer> [--include <prod|dev|optional|peer> ...]]
npm error [--strict-peer-deps] [--foreground-scripts] [--ignore-scripts] [--no-audit]
npm error [--no-bin-links] [--no-fund] [--dry-run]
npm error [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm error [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm error
npm error aliases: clean-install, ic, install-clean, isntall-clean
npm error
npm error Run "npm help ci" for more info

npm error A complete log of this run can be found in: /home/runner/.npm/_logs/2024-08-22T01_20_31_209Z-debug-0.log
Error: The process '/opt/hostedtoolcache/node/18.20.4/x64/bin/npm' failed with exit code 1
    at ExecState._setResult (/home/runner/work/_actions/bahmutov/npm-install/v1/dist/index.js:6056:25)
    at ExecState.CheckComplete (/home/runner/work/_actions/bahmutov/npm-install/v1/dist/index.js:6039:18)
    at ChildProcess.<anonymous> (/home/runner/work/_actions/bahmutov/npm-install/v1/dist/index.js:5933:27)
    at ChildProcess.emit (node:events:519:28)
    at maybeClose (node:internal/child_process:1105:16)
    at ChildProcess._handle.onexit (node:internal/child_process:305:5)
Error: The process '/opt/hostedtoolcache/node/18.20.4/x64/bin/npm' failed with exit code 1

These are the things that I've done so far:

changed vite.config.js to add the property base: "/" because my github repository is called tdM05.github.io. Nothing seemed to happen (which is expected because "/" seems to be the default value).
added this "homepage": "http://tdM05.github.io" to my package.json file. Nothing seemed to change.
Changed "private": true, to "private": false, in my package.json file. Nothing seemed to change.
Ran npm install again. Nothing changed.

Does anyone know what is going wrong? Any help would be greatly appreciated.

Solution

The error is because of a mismatch between your package.json amd package-lock.json files. The error tells that some dependencies in your package-lock.json file do not match the versions in your package.json, specifically @types/three@0.167.2.

Run this command locally to synchronize the two files.

npm install
npm install @types/three@0.167.2

this will update the package-lock.josn file and ensure that both files are in sync.

After that, commit changes to your repo.

git add package-lock.json
git commit -m "blar blar blar"
git push origin main

One more thing to check is your vite.config.js. Check out if it includes the correct base property.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: '/', // This should be fine for user.github.io repositories
});

This would work...