Open BrendanJM opened 2 years ago
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 lowercasecomputedmatch
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:
{ logout(); history.push('/'); return null; }} />
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.
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.
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
After a clean install and trying to run this, the frontend locks up and I get the following errors:
Any idea how to troubleshoot this?