Fixes to get this to build

azure-pipelines.yml

@@ -1,23 +1,37 @@
 
 # Node.js
-# Build a general Node.js project with npm.
+# Build React app
 # Add steps that analyze code, save build artifacts, deploy, and more:
 # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
 
 trigger:
 - main
 
 pool:
-  vmImage: ubuntu-latest # examples of other options:'macOS-10.15','windows-latest'
-
+  vmImage: ubuntu-latest
 
 steps:
 - task: NodeTool@0
   inputs:
-    versionSpec: '10.x'
+    versionSpec: '18.x'
   displayName: 'Install Node.js'
 
-- script: |
-    npm install
-    npm run build
-  displayName: 'npm install and build'
+- task: Bash@3
+  inputs:
+    targetType: 'inline'
+    workingDirectory: '$(System.DefaultWorkingDirectory)/react-app'
+    script: |
+      echo "Node version:"
+      node -v
+      echo "NPM version:"
+      npm -v
+      echo "Cleaning installation..."
+      rm -rf node_modules package-lock.json
+      npm cache clean --force
+      echo "Installing dependencies..."
+      npm install --legacy-peer-deps --force
+      echo "Installing specific ajv version..."
+      npm install ajv@8.12.0 ajv-keywords@5.1.0 --legacy-peer-deps --force
+      echo "Building React app..."
+      CI=true GENERATE_SOURCEMAP=false npm run build
+  displayName: 'Build React app'

react-app/.eslintrc.json

@@ -22,10 +22,14 @@
     ]
   },
   "plugins": ["react", "import", "jsx-a11y"],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",
+    "requireConfigFile": false,
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    },
     "ecmaFeatures": {
       "jsx": true
     }

react-app/package.json

@@ -21,20 +21,24 @@
   ],
   "proxy": "http://localhost:7071/",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.15.2",
-    "axios": "^0.21.1",
-    "bulma": "^0.9.2",
-    "node-sass": "^5.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.3",
-    "redux": "^4.1.0",
-    "redux-saga": "^1.1.3",
-    "redux-thunk": "^2.3.0"
+    "@fortawesome/fontawesome-free": "^5.15.4",
+    "axios": "^1.6.2",
+    "bulma": "^0.9.4",
+    "sass": "^1.69.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.20.0",
+    "react-scripts": "5.0.1",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.3",
+    "redux-thunk": "^2.4.2",
+    "ajv": "^8.12.0",
+    "ajv-keywords": "^5.1.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.23.4",

react-app/src/App.js

@@ -1,36 +1,31 @@
-import React, { Component, lazy, Suspense } from 'react';
+import React, { lazy, Suspense } from 'react';
 import 'bulma/css/bulma.css';
 import './styles.scss';
-import { Redirect, Route, Switch } from 'react-router-dom';
-import { withRouter } from 'react-router';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import { HeaderBar, NavBar, NotFound } from './components';
 import About from './About';
 
-const Products = withRouter(
-  lazy(() => import(/* webpackChunkName: "products" */ './products/Products'))
-);
+const Products = lazy(() => import(/* webpackChunkName: "products" */ './products/Products'));
 
-class App extends Component {
-  render() {
-    return (
-      <div>
-        <HeaderBar />
-        <div className="section columns">
-          <NavBar />
-          <main className="column">
-            <Suspense fallback={<div>Loading...</div>}>
-              <Switch>
-                <Redirect from="/" exact to="/products" />
-                <Route path="/products" component={Products} />
-                <Route path="/about" component={About} />
-                <Route exact path="**" component={NotFound} />
-              </Switch>
-            </Suspense>
-          </main>
-        </div>
+function App() {
+  return (
+    <div>
+      <HeaderBar />
+      <div className="section columns">
+        <NavBar />
+        <main className="column">
+          <Suspense fallback={<div>Loading...</div>}>
+            <Routes>
+              <Route path="/" element={<Navigate to="/products" replace />} />
+              <Route path="/products" element={<Products />} />
+              <Route path="/about" element={<About />} />
+              <Route path="*" element={<NotFound />} />
+            </Routes>
+          </Suspense>
+        </main>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
 export default App;

react-app/src/components/NavBar.js

@@ -5,10 +5,10 @@ const NavBar = (props) => (
   <nav className="column is-2 menu">
     <p className="menu-label">Menu</p>
     <ul className="menu-list">
-      <NavLink to="/products" activeClassName="active-link">
+      <NavLink to="/products" className={({ isActive }) => (isActive ? 'active-link' : '')}>
         Products
       </NavLink>
-      <NavLink to="/about" activeClassName="active-link">
+      <NavLink to="/about" className={({ isActive }) => (isActive ? 'active-link' : '')}>
         About
       </NavLink>
     </ul>

react-app/src/index.css

@@ -9,6 +9,6 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Arial',
     monospace;
 }

react-app/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { applyMiddleware, compose, createStore } from 'redux';
@@ -20,14 +20,14 @@ const store = createStore(
 
 sagaMiddleware.run(productSaga);
 
-ReactDOM.render(
+const rootElement = document.getElementById('root');
+const root = createRoot(rootElement);
+root.render(
   <Provider store={store}>
     <BrowserRouter>
       <App />
     </BrowserRouter>
-  </Provider>,
-
-  document.getElementById('root')
+  </Provider>
 );
 
 // If you want your app to work offline and load faster, you can change

react-app/src/products/ProductList.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { withRouter } from 'react-router';
-
 import { CardContent } from '../components';
 
 function ProductList({products}) {
+  // ...existing code...
+
   return (
     <div>
       {products.length === 0 && <div>Loading data ...</div>}
@@ -23,4 +23,4 @@ function ProductList({products}) {
   );
 }
 
-export default withRouter(ProductList);
+export default ProductList;

react-app/src/products/Products.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 
 import { ListHeader } from '../components';
 import ProductList from './ProductList';
@@ -25,13 +25,12 @@ function Products() {
       />
       <div className="columns is-multiline is-variable">
         <div className="column is-8">
-          <Switch>
+          <Routes>
             <Route
-              exact
-              path="/products"
-              component={() => <ProductList products={products} />}
+              path=""
+              element={<ProductList products={products} />}
             />
-          </Switch>
+          </Routes>
         </div>
       </div>
     </div>