Can't resolve '#splinetool/runtime' when try to deploy on GitHub pages - node.js

Question

hi geeks I am trying to deploy my website through Github pages
so I saw this video that shows me how to deploy the Nextjs website to Github pages.
https://www.youtube.com/watch?v=dalXCXCIPHM
but the build was failed with this error
Failed to compile.
./node_modules/#splinetool/react-spline/dist/react-spline.es.js
Module not found: Can't resolve '#splinetool/runtime' in '/home/runner/work/abdallahzaher2022/abdallahzaher2022/node_modules/#splinetool/react-spline/dist'
Import trace for requested module:
./node_modules/#splinetool/react-spline/dist/react-spline.es.js
./components/WelcomeComp.tsx
> Build failed because of webpack errors
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! abdallahzaher#0.1.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the abdallahzaher#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/runner/.npm/_logs/2022-11-24T15_13_56_537Z-debug.log
Error: Process completed with exit code 1.
so I found that problem is with the spline 3d model
I hope there is a solution because the npm run build runs successfully
this is some of my changes that i think it is related
next.config.js
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
images: {
loader: "akamai",
path: " ",
},
};
module.exports = nextConfig;
package.json
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"export": "next export"
},
and finally this is the workflow file in nodejs config in github pages
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
name: Node.js CI
on:
push:
branches: [ "master" ]
pull_request:
branches: [ "master" ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x, 16.x, 18.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout#v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node#v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm ci
- run: npm run build
- run: npm run export
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action#v4
with:
folder: out # The folder the action should deploy.

Answer 1

Not sure if you've already solved it, but here we go:
So, to debug this, the following information would be required:
Is it deploying correctly on Vercel?
The image 'akamai' loader is usually not required if you deploy on Vercel since they optimize much stuff behind the scenes.
A complete package.json
Suggestion: Use the default Next.js workflow configuration provided by GitHub Pages and see if the error vanishes.
Finally, here's one of my Next.js websites where I've used Spline extensively.
Feel free to use components/SplineObj.js as a template.