React Web App will not build from Azure Cognitive Search Tutorial

Question

React Web App will not build from Azure Cognitive Search Tutorial

Ziggy Zulueta 495 MVP

I am creating an Azure Static Web App to show my Azure Cognitive Search application as shown in this tutorial:

https://learn.microsoft.com/en-us/azure/search/tutorial-csharp-deploy-static-web-app

The issue here is that the Static Web App would not build. I get the following error in github under Build and Deploy Job:

npm ERR! code ERESOLVE

161npm ERR! ERESOLVE unable to resolve dependency tree

162npm ERR!

163npm ERR! While resolving: my-reacte-app@0.1.0

164npm ERR! Found: react@18.2.0

165npm ERR! node_modules/react

166npm ERR! react@"^18.2.0" from the root project

167npm ERR!

168npm ERR! Could not resolve dependency:

169npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4

170npm ERR! node_modules/@material-ui/core

171npm ERR! @material-ui/core@"^4.12.4" from the root project

172npm ERR!

173npm ERR! Fix the upstream dependency conflict, or retry

174npm ERR! this command with --force, or --legacy-peer-deps

175npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

176npm ERR!

177npm ERR! See /github/home/.npm/eresolve-report.txt for a full report.

178

179npm ERR! A complete log of this run can be found in:

180npm ERR! /github/home/.npm/_logs/2023-06-16T09_53_21_090Z-debug-0.log

I checked online as well and it seems that material-ui/core@4.12.4 is already deprecated.

Any idea on how to fix this?

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-06-19T19:17:50.01+00:00

@Ziggy Zulueta , Thanks for reporting this issue. Apologies for the delayed response from over the weekend and any inconvenience with this issue.

While I'm checking on this internally, as you mentioned, the error message indicates that there is a conflict between the dependencies of your React app and the @material-ui/core package.
Specifically, it seems that the version of React you are using is not compatible with the version of @material-ui/core that you have installed. If you haven't done this already, you may try to update the version of @material-ui/core to a version that is compatible with React 18.2.0, and see if it helps.

I'll also relay this feedback internally to our content team.

Thanks for your patience!
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-06-20T13:42:27.5466667+00:00

@Ziggy Zulueta ,

Just checking in to see if you had got a chance to see the previous response. If the answer helped (pointed, you in the right direction) > please click Accept Answer Or please share the requested/more info to help you better.
Ziggy Zulueta 495 Reputation points MVP

2023-06-20T14:15:48.2366667+00:00

How do i update to the latest version? I am unclear on how to do it via github. Can you share some directions?
Ziggy Zulueta 495 Reputation points MVP

2023-06-21T01:23:34.09+00:00

I am just going thru a tutorial in MS learn and apparently it doesnt work and there are no directions to rectify the issue

Accepted answer

0 additional answers

Your answer

ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-06-19T19:17:50.01+00:00

@Ziggy Zulueta , Thanks for reporting this issue. Apologies for the delayed response from over the weekend and any inconvenience with this issue.

While I'm checking on this internally, as you mentioned, the error message indicates that there is a conflict between the dependencies of your React app and the @material-ui/core package.
Specifically, it seems that the version of React you are using is not compatible with the version of @material-ui/core that you have installed. If you haven't done this already, you may try to update the version of @material-ui/core to a version that is compatible with React 18.2.0, and see if it helps.

I'll also relay this feedback internally to our content team.

Thanks for your patience!
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-06-20T13:42:27.5466667+00:00

@Ziggy Zulueta ,

Just checking in to see if you had got a chance to see the previous response. If the answer helped (pointed, you in the right direction) > please click Accept Answer Or please share the requested/more info to help you better.
Ziggy Zulueta 495 Reputation points MVP

2023-06-20T14:15:48.2366667+00:00

How do i update to the latest version? I am unclear on how to do it via github. Can you share some directions?
Ziggy Zulueta 495 Reputation points MVP

2023-06-21T01:23:34.09+00:00

I am just going thru a tutorial in MS learn and apparently it doesnt work and there are no directions to rectify the issue

Answer 1

ajkuma 28,036 Microsoft Employee Moderator

Apologies for any confusions and lack of clarity in the doc. I'll also relay this feedback internally to our content team.

Depending on the sample repo, typically, you would try these steps:

To update the @material-ui/core package version in your GitHub repository, you can follow these steps:

Open your GitHub repository in a web browser.
Navigate to the package.json file in your repository.
Click the pencil icon in the top right corner of the package.json file to edit the file.
Update the @material-ui/core version to the latest version that is compatible with react version
Scroll down to the bottom of the page and click the "Commit changes" button to save your changes.

You may checkout the suggestions outlined in this similar discussion thread: Error while trying to install mui core with npm.

Just to highlight, adding Search to Static WebApps is 4-part tutorial.

1 - Overview of adding search to a website with .NET

2 - Create and load Search Index with .NET

3 - Deploy the search-enabled .NET website

4 - .NET Search integration cheat sheet

Ziggy Zulueta 495 Reputation points MVP

2023-06-23T11:36:57.63+00:00
Yes I know it is a 4-part tutorial. I am already in Step #3. I never intended it to be a tutorial on React. How am I to proceed with the tutorial when the Steps are incomplete i.e the tutorial is not working anymore because of REACT? Also instead of upgrading material UI should we just downgrade to an older REACT version?

Also, It sees I need the proper combination for these 3 area. Can you help?

"@material-ui/material": "^5.13.5", "@material-ui/material-icons": "^5.11.16", "@material-ui/lab": "^5.0.0-alpha.134",
ajkuma 28,036 Reputation points Microsoft Employee Moderator

2023-06-23T18:38:56.64+00:00

Ziggy Zulueta, I wish to engage with you offline for a closer look, please send an email with subject line “Attn:Ajay” to AzCommunity[at]Microsoft[dot]com with the following details, I will follow-up with you.

1. Referencing this thread,

2. Azure subscription ID

3.Azure resource name and the time of issue occurrence.

Thanks for your patience!

--Once the issue is sorted out , I'll post back an update here.

Share via

React Web App will not build from Azure Cognitive Search Tutorial

0 additional answers

Your answer