Fresh build- front end errors #192

Activity

1. Kfelts commented on Jul 12, 2022

   

   Kfelts

   on Jul 12, 2022

   More actions

   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.

   👍React with 👍1Reacted by Safwen Ladhari
2. chhopsky commented on Mar 12, 2023

   

   chhopsky

   on Mar 12, 2023

   More actions

   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.

   👍React with 👍1Reacted by JP Hutchins
3. kevingigiano commented on Jul 15, 2023

   

   kevingigiano

   on Jul 15, 2023

   More actions

   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