尝试在 GitHub 页面上部署时无法解析"@splinetool/运行时"

Question

我正试图通过Github页面部署我的网站所以我看到了这个视频，向我展示了如何将Nextjs网站部署到Github页面。https://www.youtube.com/watch?v=dalXCXCIPHM

但构建失败，出现此错误

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.

所以我发现问题是与样条3d模型我希望有一个解决方案，因为npm run build运行成功

这是我的一些变化，我认为这是相关的

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"
},

最后这是github页面中nodejs配置中的工作流文件

# 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

不确定你是否已经解决了这个问题，但是我们开始吧:

因此，要调试它，需要以下信息:

• 是否正确部署在Vercel上?如果你部署在Vercel上，通常不需要图像'akamai'加载器，因为它们在幕后优化了很多东西。

• 一个完整的package.json

建议:使用GitHub Pages提供的默认Next.js工作流配置，看看错误是否消失。

最后，这是我的一个Next.js网站，我在那里广泛使用了Spline。
可以随意使用components/SplineObj.js作为模板。