btholt / complete-intro-to-react-v4

The Complete Intro to React, as given for Frontend Masters
https://frontendmasters.com/learn/react/
1.14k stars 248 forks source link

Cannot read property 'path' of undefined when implementing react router #19

Closed juliohr closed 5 years ago

juliohr commented 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'));
juliohr commented 5 years ago

I found the issue. There is a semicolon after <Results path="/" />