TypeError: _this.store.getState is not a function when using connect from Redux

Question

When I first run the server with node app.js everything is fine I get listening on 5050 .Then I go to localhost:5050/ and I get these warnings in the console where the server is running.

Warning: Failed propType: Required prop `store.subscribe` was not specified in `Provider`.
Warning: Failed Context Types: Required child context `store.subscribe` was not specified in `Provider`. 

The component renders fine there but once I go onto localhost:5050/ballerviews I get this on server

TypeError: _this.store.getState is not a function
    at new Connect (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react-redux/lib/components/connect.js:133:38)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactCompositeComponent.js:148:18)
    at [object Object].wrapper [as mountComponent] (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactPerf.js:66:21)
    at Object.ReactReconciler.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactReconciler.js:37:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactMultiChild.js:241:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactDOMComponent.js:591:32)
    at ReactDOMComponent.Mixin.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactDOMComponent.js:479:29)
    at Object.ReactReconciler.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactReconciler.js:37:35)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactCompositeComponent.js:225:34)
    at [object Object].wrapper [as mountComponent] (/Users/freddiecabrera/Desktop/ullibol-client/node_modules/react/lib/ReactPerf.js:66:21)

You can view the full project on my Github since I feel by viewing it there you can get the best understanding.

I have been trying to figure this out all day today and I could not. It was working fine before I tried to render on the server. I appreciate the help and if you need any more info to answer the question please let me know.

Answer 1

There are just two small issues:

1. ES2015 module -> CommonJS

You are using an ES2015 export default in src/store.js , however you then require it via CommonJS in app.js on line #11 .

This is fine of course, but you'll want to access the default property when requiring. Update the line as follows:

// Old
const store = require('./src/store.js')

// New
const store = require('./src/store.js').default

2. Calling document on the server

On line #41 of src/components/BallerViews.jsx you are accessing the document, which won't exist on the server. A quick fix would be to wrap that line in a conditional:

// Old
document.body.style.backgroundColor = '#0e0e13'

// New
if (typeof document !== 'undefined') {
  document.body.style.backgroundColor = '#0e0e13'
}