Closed juliohr closed 5 years ago
I was following the steps on the video "Component Routing with Reach Router". When I load the app on localhost:1234 it logs this error on the console:
Uncaught TypeError: Cannot read property 'path' of undefined at index.js:592 at mapSingleChildIntoContext (react.development.js:1170) at traverseAllChildrenImpl (react.development.js:1043) at traverseAllChildrenImpl (react.development.js:1059) at traverseAllChildren (react.development.js:1114) at mapIntoWithKeyPrefixInternal (react.development.js:1192) at Object.mapChildren [as map] (react.development.js:1214) at RouterImpl.render (index.js:207) at finishClassComponent (react-dom.development.js:14301) at updateClassComponent (react-dom.development.js:14264) (anonymous) @ index.js:592 mapSingleChildIntoContext @ react.development.js:1170 traverseAllChildrenImpl @ react.development.js:1043 traverseAllChildrenImpl @ react.development.js:1059 traverseAllChildren @ react.development.js:1114 mapIntoWithKeyPrefixInternal @ react.development.js:1192 mapChildren @ react.development.js:1214 render @ index.js:207 finishClassComponent @ react-dom.development.js:14301 updateClassComponent @ react-dom.development.js:14264 beginWork @ react-dom.development.js:15082 performUnitOfWork @ react-dom.development.js:17820 workLoop @ react-dom.development.js:17860 callCallback @ react-dom.development.js:149 invokeGuardedCallbackDev @ react-dom.development.js:199 invokeGuardedCallback @ react-dom.development.js:256 replayUnitOfWork @ react-dom.development.js:17107 renderRoot @ react-dom.development.js:17979 performWorkOnRoot @ react-dom.development.js:18837 performWork @ react-dom.development.js:18749 performSyncWork @ react-dom.development.js:18723 requestWork @ react-dom.development.js:18592 scheduleWork @ react-dom.development.js:18401 scheduleRootUpdate @ react-dom.development.js:19069 updateContainerAtExpirationTime @ react-dom.development.js:19097 updateContainer @ react-dom.development.js:19154 ReactRoot.render @ react-dom.development.js:19416 (anonymous) @ react-dom.development.js:19556 unbatchedUpdates @ react-dom.development.js:18952 legacyRenderSubtreeIntoContainer @ react-dom.development.js:19552 render @ react-dom.development.js:19613 parcelRequire.App.js.react @ App.js:23 newRequire @ App.d36a57b6.js:49 (anonymous) @ App.d36a57b6.js:81 (anonymous) @ App.d36a57b6.js:107 react-dom.development.js:15749 The above error occurred in the <RouterImpl> component: in RouterImpl (created by LocationProvider) in LocationProvider (created by Context.Consumer) in Location (created by Context.Consumer) in Router (created by App) in div (created by App) in App React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
I tried to delete dist and .cache directories, I installed the same package versions as this repo and it still doesn't work.
I also cloned this repo and checked out to commit 4 (which is the closest to the step I'm at). Running from this repo it works.
If I remove the , load just fine.
This is my App.js file
import React from 'react'; import { render } from 'react-dom'; import { Router, Link } from '@reach/router'; import Results from './Results'; import Details from './Details'; class App extends React.Component { render() { return ( <div> <header> <Link to="/">Adopt Me!</Link> </header> <Router> <Results path="/" />; <Details path="/details/:id" /> </Router> </div> ); } } render(<App />, document.getElementById('root'));
I found the issue. There is a semicolon after <Results path="/" />
<Results path="/" />
I was following the steps on the video "Component Routing with Reach Router". When I load the app on localhost:1234 it logs this error on the console:
I tried to delete dist and .cache directories, I installed the same package versions as this repo and it still doesn't work.
I also cloned this repo and checked out to commit 4 (which is the closest to the step I'm at). Running from this repo it works.
If I remove the, load just fine.
This is my App.js file