Error Deploying Static Web App to Azure (React) Using Git Hub - reactjs

Question

I'm trying to Deploy a React App to a Static Web App in Azure, using my GitHub repository.
When I look in the actions in Git Hub and view the delopment run it fails.
This is the error that I see:
Running 'npm install --unsafe-perm'...
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-typed#1.2.0
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR! peer react#"^18.0.0" from #testing-library/react#13.4.0
npm ERR! node_modules/#testing-library/react
npm ERR! #testing-library/react#"^13.4.0" from the root project
npm ERR! 7 more (html-react-parser, react-dom, react-helmet, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.3.0" from react-typed#1.2.0
npm ERR! node_modules/react-typed
npm ERR! react-typed#"^1.2.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#16.14.0
npm ERR! node_modules/react
npm ERR! peer react#"^16.3.0" from react-typed#1.2.0
npm ERR! node_modules/react-typed
npm ERR! react-typed#"^1.2.0" from the root project
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-28T18_21_32_391Z-debug-0.log
---End of Oryx build logs---
Oryx has failed to build the solution.
Can anyone suggest why my build is failing and how to fix it?
This is what the yml work flow looks like:
name: Azure Static Web Apps CI/CD
on:
push:
branches:
- master
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- master
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#v3
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 }}
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: "build" # 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 }}
action: "close"

Answer 1

Check the below steps to deploy React app to Azure Static Web App
In file explorer create a folder with name reactstatic.
In VSCode, open the new terminal and run the below command to create a new react app.
npx create-react-app ./
Thanks #Christian Glessner for the Git Repo
In GitHub, create a new repository.
From VS Code, push the newly created app to GitHub
In Azure Portal, create a Static Web App using GitHubAccount with the below given values.
In GitHub,workflows folder will be created.
Check whether the build is success or not in GitHub -
https://github.com/Organization/YourAppName
Click on Actions => Build and Deploy Job
Now we can Open the Static Web App in Portal and access the Url.
Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
To fix the error, as mentioned in the error itself
run the below command
npm config set legacy-peer-deps true
npm i
To fix the error, as mentioned in the error itself
run the below command
npm config set legacy-peer-deps true
npm i
If you still face the issue, delete the node_modules folder ,package-json.lock file and run the above command again.