Simple note taker TypeError: Cannot read property 'history' of undefined

[Crashmailman]

Hi guys Love your work so far, very easy to follow, i am sorry to be a pain but i have been following this task and i keep getting an error when i run , hoping someone can tell me where i went wrong, i am sure i followed everything but i might not have. thank you in advance

TypeError: Cannot read property 'history' of undefined LinkContainer.render C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-router-bootstrap/lib/LinkContainer.js:147 144 | getIsActive = _props.isActive, 145 | props = _objectWithoutProperties(_props, ['children', 'replace', 'to', 'exact', 'strict', 'activeClassName', 'className', 'activeStyle', 'style', 'isActive']); 146 |

147 | var href = this.context.router.history.createHref(typeof to === 'string' ? { | ^ 148 | pathname: to 149 | } : to); 150 | View compiled finishClassComponent C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:15276 15273 | } else { 15274 | { 15275 | setCurrentPhase('render'); 15276 | nextChildren = instance.render(); | ^ 15277 | 15278 | if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) { 15279 | instance.render(); View compiled updateClassComponent C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:15231 15228 | shouldUpdate = updateClassInstance(current$$1, workInProgress, Component, nextProps, renderExpirationTime); 15229 | } 15230 | 15231 | var nextUnitOfWork = finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime); | ^ 15232 | { 15233 | var inst = workInProgress.stateNode; 15234 | View compiled beginWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:16221 16218 | 16219 | var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps); 16220 | 16221 | return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime); | ^ 16222 | } 16223 | 16224 | case HostRoot: View compiled performUnitOfWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:20241 20238 | startProfilerTimer(workInProgress); 20239 | } 20240 | 20241 | next = beginWork(current$$1, workInProgress, nextRenderExpirationTime); | ^ 20242 | workInProgress.memoizedProps = workInProgress.pendingProps; 20243 | 20244 | if (workInProgress.mode & ProfileMode) { View compiled workLoop C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:20282 20279 | if (!isYieldy) { 20280 | // Flush work without yielding 20281 | while (nextUnitOfWork !== null) { 20282 | nextUnitOfWork = performUnitOfWork(nextUnitOfWork); | ^ 20283 | } 20284 | } else { 20285 | // Flush asynchronous work until there's a higher priority event View compiled HTMLUnknownElement.callCallback C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:147 144 | window.event = windowEvent; 145 | } 146 | 147 | func.apply(context, funcArgs); | ^ 148 | didError = false; 149 | } // Create a global error event handler. We use this to capture the value 150 | // that was thrown. It's possible that this error handler will fire more View compiled invokeGuardedCallbackDev C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:196 193 | // errors, it will trigger our global error handler. 194 | 195 | evt.initEvent(evtType, false, false); 196 | fakeNode.dispatchEvent(evt); | ^ 197 | 198 | if (windowEventDescriptor) { 199 | Object.defineProperty(window, 'event', windowEventDescriptor); View compiled invokeGuardedCallback C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:250 247 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) { 248 | hasError = false; 249 | caughtError = null; 250 | invokeGuardedCallbackImpl$1.apply(reporter, arguments); | ^ 251 | } 252 | /* 253 | Same as invokeGuardedCallback, but instead of returning an error, it stores View compiled replayUnitOfWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:19465 19462 | 19463 | isReplayingFailedUnitOfWork = true; 19464 | originalReplayError = thrownValue; 19465 | invokeGuardedCallback(null, workLoop, null, isYieldy); | ^ 19466 | isReplayingFailedUnitOfWork = false; 19467 | originalReplayError = null; 19468 | View compiled renderRoot C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:20395 20392 | if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) { 20393 | if (mayReplay) { 20394 | var failedUnitOfWork = nextUnitOfWork; 20395 | replayUnitOfWork(failedUnitOfWork, thrownValue, isYieldy); | ^ 20396 | } 20397 | } // TODO: we already know this isn't true in some cases. 20398 | // At least this shows a nicer error message until we figure out the cause. View compiled performWorkOnRoot C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21319 21316 | cancelTimeout(timeoutHandle); 21317 | } 21318 | 21319 | renderRoot(root, isYieldy); | ^ 21320 | finishedWork = root.finishedWork; 21321 | 21322 | if (finishedWork !== null) { View compiled performWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21229 21226 | } 21227 | } else { 21228 | while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && minExpirationTime <= nextFlushedExpirationTime) { 21229 | performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false); | ^ 21230 | findHighestPriorityRoot(); 21231 | } 21232 | } // We're done flushing work. Either we ran out of time in this callback, View compiled performSyncWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21203 21200 | } 21201 | 21202 | function performSyncWork() { 21203 | performWork(Sync, false); | ^ 21204 | } 21205 | 21206 | function performWork(minExpirationTime, isYieldy) { View compiled requestWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21058 21055 | 21056 | 21057 | if (expirationTime === Sync) { 21058 | performSyncWork(); | ^ 21059 | } else { 21060 | scheduleCallbackWithExpirationTime(root, expirationTime); 21061 | } View compiled scheduleWork C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:20871 20868 | !isWorking || isCommitting$1 || // ...unless this is a different root than the one we're rendering. 20869 | nextRoot !== root) { 20870 | var rootExpirationTime = root.expirationTime; 20871 | requestWork(root, rootExpirationTime); | ^ 20872 | } 20873 | 20874 | if (nestedUpdateCount > NESTED_UPDATE_LIMIT) { View compiled scheduleRootUpdate C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21566 21563 | 21564 | flushPassiveEffects(); 21565 | enqueueUpdate(current$$1, update); 21566 | scheduleWork(current$$1, expirationTime); | ^ 21567 | return expirationTime; 21568 | } 21569 | View compiled updateContainerAtExpirationTime C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21592 21589 | container.pendingContext = context; 21590 | } 21591 | 21592 | return scheduleRootUpdate(current$$1, element, expirationTime, callback); | ^ 21593 | } 21594 | 21595 | function findHostInstance(component) { View compiled updateContainer C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21660 21657 | var current$$1 = container.current; 21658 | var currentTime = requestCurrentTime(); 21659 | var expirationTime = computeExpirationForFiber(currentTime, current$$1); 21660 | return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback); | ^ 21661 | } 21662 | 21663 | function getPublicRootInstance(container) { View compiled ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21973 21970 | work.then(callback); 21971 | } 21972 | 21973 | updateContainer(children, root, null, work._onCommit); | ^ 21974 | return work; 21975 | }; 21976 | View compiled (anonymous function) C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:22125 22122 | if (parentComponent != null) { 22123 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback); 22124 | } else { 22125 | root.render(children, callback); | ^ 22126 | } 22127 | }); 22128 | } else { View compiled unbatchedUpdates C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:21448 21445 | } 21446 | } 21447 | 21448 | return fn(a); | ^ 21449 | } // TODO: Batching should be implemented at the renderer level, not within 21450 | // the reconciler. 21451 | View compiled legacyRenderSubtreeIntoContainer C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:22121 22118 | } // Initial mount should not be batched. 22119 | 22120 | 22121 | unbatchedUpdates(function () { | ^ 22122 | if (parentComponent != null) { 22123 | root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback); 22124 | } else { View compiled render C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/node_modules/react-dom/cjs/react-dom.development.js:22196 22193 | { 22194 | !!container._reactHasBeenPassedToCreateRootDEV ? warningWithoutStack$1(false, 'You are calling ReactDOM.render() on a container that was previously ' + 'passed to ReactDOM.%s(). This is not supported. ' + 'Did you mean to call root.render(element)?', enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot') : void 0; 22195 | } 22196 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback); | ^ 22197 | }, 22198 | unstable_renderSubtreeIntoContainer: function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) { 22199 | !isValidContainer(containerNode) ? invariant(false, 'Target container is not a DOM element.') : void 0; View compiled Module../src/index.js C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/src/index.js:8 5 | import * as serviceWorker from './serviceWorker'; 6 | import { BrowserRouter as Router } from "react-router-dom"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , View compiled webpack_require C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled 0 http://localhost:3000/static/js/main.chunk.js:638:18 webpack_require C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled checkDeferredModules C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | return result; View compiled Array.webpackJsonpCallback [as push] C:/Users/Adam.Wolarczuk/Desktop/Projects/notes-app-client/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:57

[rooox]

I experienced the same yesterday. I just resorted to ditching the LinkContainer and just replacing it with which is imported from react-router-dom. I just read about the possible fix of wrapping the LinkContainer in a withRouter in order to make it work, which was a thought that I hadn't tried.

Hear is the thread: https://github.com/react-bootstrap/react-router-bootstrap/issues/237

[jayair]

@rooox Good catch. Thanks for looking into it. Can you elaborate on your fix a bit more? I'll add it to the chapter.

[jayair]

Here is a temporary fix for this while react-router-bootstrap rolls out a permanent fix for it (https://github.com/react-bootstrap/react-router-bootstrap/pull/248).

https://discourse.serverless-stack.com/t/tutorial-error-step-adding-links-in-the-navbar-step-import-linkcontainer-from-react-router-bootstrap/897/2?u=jayair

[filipesmedeiros]

Hey @jayair ! It doesn't fiz the issue for me. Keep getting the same error. No idea why. Any clues? Copied the code exactly.

[jayair]

Did you create a new component like the comment suggested?

An alternative fix here is to use React Router 4.3.1 for now while react-router-bootstrap rolls out a fix.

$ npm install react-router-dom@4.3.1

[filipesmedeiros]

Yup created a new component. I'll try the older version as a temporary solution and give feedback later today. Thanks for the amazing work!

[filipesmedeiros]

Worked on 4.3.1 (obviously right?)