0

I have a nextjs/react static website. It has github action and I am no much idea about Github action. I have made one branch from main branch, and commit the code and finally merged that branch to main branch. But when i check on the live website, changes are not going live.

If I check the Github Action, under Build and Deploy I can see this error

/usr/bin/docker run --name d55814534de1b9b56417e87549ec6d1c2fcf3_ffa1b5 --label 8d5581 --workdir /github/workspace --rm -e "INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN" -e "INPUT_REPO_TOKEN" -e "INPUT_ACTION" -e "INPUT_APP_LOCATION" -e "INPUT_API_LOCATION" -e "INPUT_OUTPUT_LOCATION" -e "INPUT_API_BUILD_COMMAND" -e "INPUT_APP_ARTIFACT_LOCATION" -e "INPUT_APP_BUILD_COMMAND" -e "INPUT_ROUTES_LOCATION" -e "INPUT_SKIP_APP_BUILD" -e "INPUT_CONFIG_FILE_LOCATION" -e "INPUT_SKIP_API_BUILD" -e "INPUT_PRODUCTION_BRANCH" -e "INPUT_DEPLOYMENT_ENVIRONMENT" -e "INPUT_IS_STATIC_EXPORT" -e "HOME" -e "GITHUB_JOB" -e "GITHUB_REF" -e "GITHUB_SHA" -e "GITHUB_REPOSITORY" -e "GITHUB_REPOSITORY_OWNER" -e "GITHUB_RUN_ID" -e "GITHUB_RUN_NUMBER" -e "GITHUB_RETENTION_DAYS" -e "GITHUB_RUN_ATTEMPT" -e "GITHUB_ACTOR" -e "GITHUB_TRIGGERING_ACTOR" -e "GITHUB_WORKFLOW" -e "GITHUB_HEAD_REF" -e "GITHUB_BASE_REF" -e "GITHUB_EVENT_NAME" -e "GITHUB_SERVER_URL" -e "GITHUB_API_URL" -e "GITHUB_GRAPHQL_URL" -e "GITHUB_REF_NAME" -e "GITHUB_REF_PROTECTED" -e "GITHUB_REF_TYPE" -e "GITHUB_WORKSPACE" -e "GITHUB_ACTION" -e "GITHUB_EVENT_PATH" -e "GITHUB_ACTION_REPOSITORY" -e "GITHUB_ACTION_REF" -e "GITHUB_PATH" -e "GITHUB_ENV" -e "GITHUB_STEP_SUMMARY" -e "GITHUB_STATE" -e "GITHUB_OUTPUT" -e "RUNNER_OS" -e "RUNNER_ARCH" -e "RUNNER_NAME" -e "RUNNER_TOOL_CACHE" -e "RUNNER_TEMP" -e "RUNNER_WORKSPACE" -e "ACTIONS_RUNTIME_URL" -e "ACTIONS_RUNTIME_TOKEN" -e "ACTIONS_CACHE_URL" -e GITHUB_ACTIONS=true -e CI=true -v "/var/run/docker.sock":"/var/run/docker.sock" -v "/home/runner/work/_temp/_github_home":"/github/home" -v "/home/runner/work/_temp/_github_workflow":"/github/workflow" -v "/home/runner/work/_temp/_runner_file_commands":"/github/file_commands" -v "/home/runner/work/CRIRSCO/CRIRSCO":"/github/workspace" 8d5581:4534de1b9b56417e87549ec6d1c2fcf3
DeploymentId: 37a236e8-7912-4e34-af2f-50d08707dc6b

App Directory Location: '/' was found.
Looking for event info
Starting to build app with Oryx
Azure Static Web Apps utilizes Oryx to build both static applications and Azure Functions. You can find more details on Oryx here: https://github.com/microsoft/Oryx
---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at ht5tps://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20221103.1, Commit: a2c65de152b749fea, ReleaseTagName: 20221103.1

Build Operation ID: |=.
Repository Commit : 

Detecting platforms...
Detected following platforms:
  nodejs: 16.18.0
Version '16.18.0' of platform 'nodejs' is not installed. Generating script to install it...
Detected the following frameworks: Next.js


Source directory     : /github/workspace
Destination directory: /bin/staticsites/ss-oryx/app


Downloading and extracting 'nodejs' version '16.18.0' to '/opt/nodejs/16.18.0'...
Detected image debian flavor: bullseye.
Downloaded in 0 sec(s).
Verifying checksum...
Extracting contents...
performing sha512 checksum for: nodejs...
Done in 1 sec(s).

Removing existing manifest file
Creating directory for command manifest file if it does not exist
Creating a manifest file...
Node Build Command Manifest file created.

Using Node version:
v16.18.0

Using Npm version:
8.19.2

Running 'npm install --unsafe-perm'...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-dom@16.13.1
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!   peer react@"^16.6.0 || ^17" from next@10.2.3
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.7" from the root project
npm ERR!   3 more (@next/react-dev-overlay, styled-jsx, use-subscription)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from react-dom@16.13.1
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"16.13.1" from the root project
npm ERR!   peer react-dom@"^16.6.0 || ^17" from next@10.2.3
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.7" from the root project
npm ERR!   1 more (@next/react-dev-overlay)
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.13.1" from react-dom@16.13.1
npm ERR!   node_modules/react-dom
npm ERR!     react-dom@"16.13.1" from the root project
npm ERR!     peer react-dom@"^16.6.0 || ^17" from next@10.2.3
npm ERR!     node_modules/next
npm ERR!       next@"^10.0.7" from the root project
npm ERR!     1 more (@next/react-dev-overlay)
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /github/home/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /github/home/.npm/_logs/2022-11-13T21_42_31_784Z-debug-0.log


---End of Oryx build logs---
Oryx has failed to build the solution.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting

My yml file on main branch looks like this

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_MOSS_0A9A6EE00 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "out" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_VICTORIOUS_MOSS_0A9A6EE00 }}
          action: "close"

Is there any way to make changes live on the wesbite regardless of passing or failing of github action.? Will my changes will go live if i comment Github action? Any help would be greatly appreciated. Thanks

I am expecting solution

tian
  • 5
  • 1
nick
  • 17
  • 4

1 Answers1

0

You're running into dependency issues with package versions. That is, you have version X installed for package A, but package B is dependent on package A using version Y.

You either need to go into your package.json file and change the versions of the offending packages to be compatible (as informed by the above error message), or if you'd like a general / more brute force solution, add the flag --legacy-peer-deps to wherever npm install is being ran in your pipeline.

  • Hi, I created a new branch, made some changes and ran npm install --legacy-peer-deps, and finally merged this branch to master, but new updates are not appearing in the website and Github Action Build and Deploy still shows the same error. Thanks for your reply – nick Nov 14 '22 at 23:37
  • Where did you run `npm install --legacy-peer-deps`? Doing that locally before pushing changes isn't going to affect anything - it's the pipeline running npm install that's causing your issues. I'm not familiar with Azure pipeline, but there's surely an easy way to add build params which will allows you to append that flag on the install. –  Nov 15 '22 at 01:39
  • thanks Zack, i did locally, is there way to do something in above .yml file so that website updates the changes? Thanks – nick Nov 15 '22 at 03:01
  • I'm not sure, but after googling this seems like it might do it? https://stackoverflow.com/questions/73664885/how-to-configure-the-npm-install-comnand-to-npm-install-legacy-peer-deps-in Referring to the answer of the .npmrc file. If not, you could repost this question specifying that you'd like to know how you would add that flag with azure pipelines. There may be a much better solution that would just be like an extra line the .yml you posted. –  Nov 15 '22 at 03:35
  • Thanks Zack, I have made .nmrec file , now in github I see this error: Error: Could not find a production build in the '/github/workspace/.next' directory. Try building your app with 'next build' before starting the static export. https://nextjs.org/docs/messages/next-export-no-build-id at /github/workspace/node_modules/next/dist/export/index.js:62:19 at async Span.traceAsyncFn (/github/workspace/node_modules/next/dist/trace/trace.js:79:20) – nick Nov 15 '22 at 23:09
  • here is new question please help: https://stackoverflow.com/questions/74453313/how-to-solve-npm-error-in-next-js-project – nick Nov 15 '22 at 23:19