Fresh build- front end errors

[brendan-morin]

After a clean install and trying to run this, the frontend locks up and I get the following errors:

Warning: React does not recognize the `computedMatch` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `computedmatch` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

ReferenceError: Can't find variable: process

TypeScript error in /app/src/index.tsx(8,4):
'Router' cannot be used as a JSX component.
  Its instance type 'BrowserRouter' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.  TS2786

     6 | 
     7 | ReactDOM.render(
  >  8 |   <Router>
       |    ^
     9 |     <App />
    10 |   </Router>,
    11 |   document.getElementById('root')

TypeScript error in /app/src/Routes.tsx(31,6):
'Switch' cannot be used as a JSX component.
  Its instance type 'Switch' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.  TS2786

TypeScript error in /app/src/views/SignUp.tsx(58,6):
'Redirect' cannot be used as a JSX component.
  Its instance type 'Redirect' is not a valid JSX element.  TS2786

Any idea how to troubleshoot this?

[Kfelts]

Which version of React and React Router are you using? React Router v6 made a lot of changes.

Warning: React does not recognize the computedMatch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase computedmatch instead. If you accidentally passed it from a parent component, remove it from the DOM element. ReferenceError: Can't find variable: process ```

TypeScript error in /app/src/index.tsx(8,4): 'Router' cannot be used as a JSX component. Its instance type 'BrowserRouter' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition group/node_modules/@types/react/index").ReactNode'. TS2786

     6 | 
     7 | ReactDOM.render(
  >  8 |   <Router>
       |    ^
     9 |     <App />
    10 |   </Router>,
    11 |   document.getElementById('root')

ReactDOM.render has been changed to createRoot.

 1 | Import { createRoot} from 'react-dom/client'

6  | const container = document.getElementById('root');
7  | const root = createRoot(container!);
8  | root.render(
9  |    <Router >
10 |        <App />
11 |   <Router />
12 | );

'Switch' cannot be used as a JSX component.
  Its instance type 'Switch' is not a valid JSX element.```

In v6 'Switch' was removed entirely. 'Switch' is now 'Routes'

The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'. TS2786

There have also been changes made in the way that routes are rendered. This is what it looked like prior:

    <header className={classes.header}>
      <Route path="/login" component={Login} />
        <Login />
      <Route path="/signup" component={SignUp} />
      <Route
        path="/logout"
        render={() => {
          logout();
          history.push('/');
          return null;
        }}
      />
      <PrivateRoute path="/protected" component={Protected} />
      <Route exact path="/" component={Home} />
    </header>
  </div>
</Routes>

This requires some refactoring, so I'd recommend taking a look at what upgrades are needed for React 18 and react hooks

'Redirect' cannot be used as a JSX component. 

In v6 'Redirect' has been changed to 'Navigate'. Change 'useHistory' to 'useNavigate' and then 'Redirect' to 'Navigate' in the jsx component.

[chhopsky]

They're using the version that's in the clean install, as described in the readme.md

I see the same behavior following the instructions provided, and given I was installing this to start playing with and learning react, makes the whole thing pretty useless.

[kevingigiano]

Confirmed this is still a problem.

I was hoping to use this as a basis for a pet project/learning.

Unfortunately, standing up from scratch using README results in a broken state as mentioned by @Kfelts and @chhopsky