CODEWITHSUNDEEP
node.jsreactjsgithubnpmspline
Abdallah Abu sedo
Abdallah Abu sedo

Reputation: 115

Can't resolve '@splinetool/runtime' when try to deploy on GitHub pages

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! [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.

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.

Upvotes: 0

Views: 1410

Answers (1)

Suvraneel
Suvraneel

Reputation: 1

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.

Upvotes: 0

Related Questions