The sample is not working.

[hisashiyamaguchi]

I'm trying to play the sample, but it's not working. I'm using Mac OS Catalina and Node.js v10.15.3. Here comes the error on Chome.

TypeError: mapDispatch is not a function
Connect.configureFinalMapDispatch
node_modules/react-redux/lib/components/connect.js:146
143 | };
144 |
145 | Connect.prototype.configureFinalMapDispatch = function configureFinalMapDispatch(store, props) {

146 | var mappedDispatch = mapDispatch(store.dispatch, props);
| ^ 147 | var isFactory = typeof mappedDispatch === 'function';
148 |
149 | this.finalMapDispatchToProps = isFactory ? mappedDispatch : mapDispatch;
View compiled
Connect.computeDispatchProps
node_modules/react-redux/lib/components/connect.js:135
132 |
133 | Connect.prototype.computeDispatchProps = function computeDispatchProps(store, props) {
134 | if (!this.finalMapDispatchToProps) {
135 | return this.configureFinalMapDispatch(store, props);
| ^ 136 | }
137 |
138 | var dispatch = store.dispatch;
View compiled
Connect.updateDispatchPropsIfNeeded
node_modules/react-redux/lib/components/connect.js:166
163 | };
164 |
165 | Connect.prototype.updateDispatchPropsIfNeeded = function updateDispatchPropsIfNeeded() {
166 | var nextDispatchProps = this.computeDispatchProps(this.store, this.props);
| ^ 167 | if (this.dispatchProps && (0, _shallowEqual2["default"])(nextDispatchProps, this.dispatchProps)) {
168 | return false;
169 | }
View compiled
Connect.render
node_modules/react-redux/lib/components/connect.js:270
267 | haveStatePropsChanged = this.updateStatePropsIfNeeded();
268 | }
269 | if (shouldUpdateDispatchProps) {
270 | haveDispatchPropsChanged = this.updateDispatchPropsIfNeeded();
| ^ 271 | }
272 |
273 | var haveMergedPropsChanged = true;
View compiled
(anonymous function)
node_modules/react-dom/lib/ReactCompositeComponent.js:793
790 |
791 | if (process.env.NODE_ENV !== 'production') {
792 | renderedElement = measureLifeCyclePerf(function () {
793 | return inst.render();
| ^ 794 | }, this._debugID, 'render');
795 | } else {
796 | renderedElement = inst.render();
View compiled
measureLifeCyclePerf
node_modules/react-dom/lib/ReactCompositeComponent.js:73
70 |
71 | ReactInstrumentation.debugTool.onBeginLifeCycleTimer(debugID, timerType);
72 | try {
73 | return fn();
| ^ 74 | } finally {
75 | ReactInstrumentation.debugTool.onEndLifeCycleTimer(debugID, timerType);
76 | }
View compiled
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
node_modules/react-dom/lib/ReactCompositeComponent.js:792
789 | var renderedElement;
790 |
791 | if (process.env.NODE_ENV !== 'production') {
792 | renderedElement = measureLifeCyclePerf(function () {
| ^ 793 | return inst.render();
794 | }, this._debugID, 'render');
795 | } else {
View compiled
ReactCompositeComponentWrapper._renderValidatedComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:819
816 | if (process.env.NODE_ENV !== 'production' || this._compositeType !== CompositeTypes.StatelessFunctional) {
817 | ReactCurrentOwner.current = this;
818 | try {
819 | renderedElement = this._renderValidatedComponentWithoutOwnerOrContext();
| ^ 820 | } finally {
821 | ReactCurrentOwner.current = null;
822 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:359
356 |
357 | // If not a stateless component, we now render
358 | if (renderedElement === undefined) {
359 | renderedElement = this._renderValidatedComponent();
| ^ 360 | }
361 |
362 | var nodeType = ReactNodeTypes.getType(renderedElement);
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:255
252 | if (inst.unstable_handleError) {
253 | markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
254 | } else {
255 | markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
| ^ 256 | }
257 |
258 | if (inst.componentDidMount) {
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
ReactDOMComponent.mountChildren
node_modules/react-dom/lib/ReactMultiChild.js:234
231 | if (process.env.NODE_ENV !== 'production') {
232 | selfDebugID = getDebugID(this);
233 | }
234 | var mountImage = ReactReconciler.mountComponent(child, transaction, this, this._hostContainerInfo, context, selfDebugID);
| ^ 235 | child._mountIndex = index++;
236 | mountImages.push(mountImage);
237 | }
View compiled
ReactDOMComponent._createInitialChildren
node_modules/react-dom/lib/ReactDOMComponent.js:701
698 | DOMLazyTree.queueText(lazyTree, contentToUse);
699 | }
700 | } else if (childrenToUse != null) {
701 | var mountImages = this.mountChildren(childrenToUse, transaction, context);
| ^ 702 | for (var i = 0; i < mountImages.length; i++) {
703 | DOMLazyTree.queueChild(lazyTree, mountImages[i]);
704 | }
View compiled
ReactDOMComponent.mountComponent
node_modules/react-dom/lib/ReactDOMComponent.js:520
517 | }
518 | this._updateDOMProperties(null, props, transaction);
519 | var lazyTree = DOMLazyTree(el);
520 | this._createInitialChildren(transaction, props, context, lazyTree);
| ^ 521 | mountImage = lazyTree;
522 | } else {
523 | var tagOpen = this._createOpenTagMarkupAndPutListeners(transaction, props);
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:368
365 | );
366 | this._renderedComponent = child;
367 |
368 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
| ^ 369 |
370 | if (process.env.NODE_ENV !== 'production') {
371 | if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:255
252 | if (inst.unstable_handleError) {
253 | markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
254 | } else {
255 | markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
| ^ 256 | }
257 |
258 | if (inst.componentDidMount) {
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:368
365 | );
366 | this._renderedComponent = child;
367 |
368 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
| ^ 369 |
370 | if (process.env.NODE_ENV !== 'production') {
371 | if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:255
252 | if (inst.unstable_handleError) {
253 | markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
254 | } else {
255 | markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
| ^ 256 | }
257 |
258 | if (inst.componentDidMount) {
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:368
365 | );
366 | this._renderedComponent = child;
367 |
368 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
| ^ 369 |
370 | if (process.env.NODE_ENV !== 'production') {
371 | if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:255
252 | if (inst.unstable_handleError) {
253 | markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
254 | } else {
255 | markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
| ^ 256 | }
257 |
258 | if (inst.componentDidMount) {
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:368
365 | );
366 | this._renderedComponent = child;
367 |
368 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
| ^ 369 |
370 | if (process.env.NODE_ENV !== 'production') {
371 | if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:255
252 | if (inst.unstable_handleError) {
253 | markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
254 | } else {
255 | markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
| ^ 256 | }
257 |
258 | if (inst.componentDidMount) {
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
ReactCompositeComponentWrapper.performInitialMount
node_modules/react-dom/lib/ReactCompositeComponent.js:368
365 | );
366 | this._renderedComponent = child;
367 |
368 | var markup = ReactReconciler.mountComponent(child, transaction, hostParent, hostContainerInfo, this._processChildContext(context), debugID);
| ^ 369 |
370 | if (process.env.NODE_ENV !== 'production') {
371 | if (debugID !== 0) {
View compiled
ReactCompositeComponentWrapper.mountComponent
node_modules/react-dom/lib/ReactCompositeComponent.js:255
252 | if (inst.unstable_handleError) {
253 | markup = this.performInitialMountWithErrorHandling(renderedElement, hostParent, hostContainerInfo, transaction, context);
254 | } else {
255 | markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
| ^ 256 | }
257 |
258 | if (inst.componentDidMount) {
View compiled
mountComponent
node_modules/react-dom/lib/ReactReconciler.js:43
40 | ReactInstrumentation.debugTool.onBeforeMountComponent(internalInstance._debugID, internalInstance._currentElement, parentDebugID);
41 | }
42 | }
43 | var markup = internalInstance.mountComponent(transaction, hostParent, hostContainerInfo, context, parentDebugID);
| ^ 44 | if (internalInstance._currentElement && internalInstance._currentElement.ref != null) {
45 | transaction.getReactMountReady().enqueue(attachRefs, internalInstance);
46 | }
View compiled
mountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:102
99 | console.time(markerName);
100 | }
101 |
102 | var markup = ReactReconciler.mountComponent(wrapperInstance, transaction, null, ReactDOMContainerInfo(wrapperInstance, container), context, 0 /* parentDebugID /
| ^ 103 | );
104 |
105 | if (markerName) {
View compiled
ReactReconcileTransaction.perform
node_modules/react-dom/lib/Transaction.js:141
138 | // one of these calls threw.
139 | errorThrown = true;
140 | this.initializeAll(0);
141 | ret = method.call(scope, a, b, c, d, e, f);
| ^ 142 | errorThrown = false;
143 | } finally {
144 | try {
View compiled
batchedMountComponentIntoNode
node_modules/react-dom/lib/ReactMount.js:124
121 | var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(
122 | / useCreateElement /
123 | !shouldReuseMarkup && ReactDOMFeatureFlags.useCreateElement);
124 | transaction.perform(mountComponentIntoNode, null, componentInstance, container, transaction, shouldReuseMarkup, context);
125 | ReactUpdates.ReactReconcileTransaction.release(transaction);
126 | }
127 |
View compiled
ReactDefaultBatchingStrategyTransaction.perform
node_modules/react-dom/lib/Transaction.js:141
138 | // one of these calls threw.
139 | errorThrown = true;
140 | this.initializeAll(0);
141 | ret = method.call(scope, a, b, c, d, e, f);
| ^ 142 | errorThrown = false;
143 | } finally {
144 | try {
View compiled
batchedUpdates
node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:60
57 | if (alreadyBatchingUpdates) {
58 | return callback(a, b, c, d, e);
59 | } else {
60 | return transaction.perform(callback, null, a, b, c, d, e);
61 | }
62 | }
63 | };
View compiled
batchedUpdates
node_modules/react-dom/lib/ReactUpdates.js:95
92 |
93 | function batchedUpdates(callback, a, b, c, d, e) {
94 | ensureInjected();
95 | return batchingStrategy.batchedUpdates(callback, a, b, c, d, e);
96 | }
97 |
98 | /*
View compiled
_renderNewRootComponent
node_modules/react-dom/lib/ReactMount.js:317
314 | // rendering, in componentWillMount or componentDidMount, will be batched
315 | // according to the current batching strategy.
316 |
317 | ReactUpdates.batchedUpdates(batchedMountComponentIntoNode, componentInstance, container, shouldReuseMarkup, context);
| ^ 318 |
319 | var wrapperID = componentInstance._instance.rootID;
320 | instancesByReactRootID[wrapperID] = componentInstance;
View compiled
_renderSubtreeIntoContainer
node_modules/react-dom/lib/ReactMount.js:399
396 | }
397 |
398 | var shouldReuseMarkup = containerHasReactMarkup && !prevComponent && !containerHasNonRootReactChild;
399 | var component = ReactMount._renderNewRootComponent(nextWrappedElement, container, shouldReuseMarkup, nextContext)._renderedComponent.getPublicInstance();
| ^ 400 | if (callback) {
401 | callback.call(component);
402 | }
View compiled
render
node_modules/react-dom/lib/ReactMount.js:420
417 | * @return {ReactComponent} Component instance rendered in container.
418 | /
419 | render: function (nextElement, container, callback) {
420 | return ReactMount._renderSubtreeIntoContainer(null, nextElement, container, callback);
| ^ 421 | },
422 |
423 | /*
View compiled
Module../src/index.js
src/index.js:27
24 | applyMiddleware(reduxThunk)
25 | ));
26 |
27 | ReactDOM.render(
28 |
29 |
30 |
View compiled
webpack_require
/Users/hisashiyamaguchi/react-redux-embedded-login/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
fn
/Users/hisashiyamaguchi/react-redux-embedded-login/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
150 | return webpack_require(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:3171:18
webpack_require
/Users/hisashiyamaguchi/react-redux-embedded-login/webpack/bootstrap:785
782 | };
783 |
784 | // Execute the module function
785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 786 |
787 | // Flag the module as loaded
788 | module.l = true;
View compiled
checkDeferredModules
/Users/hisashiyamaguchi/react-redux-embedded-login/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
45 | result = webpack_require(webpack_require.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
/Users/hisashiyamaguchi/react-redux-embedded-login/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:81
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

[chrisaddams]

I've had the same issue. Documentation and samples are lacking around Redux.