尝试在 GitHub 页面上部署时无法解析“@splinetool/runtime”

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! [email protected] build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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

作为模板。

Answer 2

尝试手动安装这个库，对我有用 https://www.npmjs.com/package/@splinetool/runtime