Error when I copy & paste the README example: history.listen is undefined

[ericelliott]

Description

Just trying to get a simple example up and running, but I'm running into an error:

universal-react-boilerplate/node_modules/redux-simple-router/lib/index.js:72
    unsubscribeHistory = history.listen(function (location) {
                                ^

TypeError: Cannot read property 'listen' of undefined
    at middleware (/Users/eric/Dropbox/dev/universal-react-boilerplate/node_modules/redux-simple-router/lib/index.js:72:33)
    at /Users/eric/Dropbox/dev/universal-react-boilerplate/node_modules/redux/lib/utils/applyMiddleware.js:50:16
    at Array.map (native)
    at /Users/eric/Dropbox/dev/universal-react-boilerplate/node_modules/redux/lib/utils/applyMiddleware.js:49:27
    at configureStore (configure-store.js:16:10)
    at Object.<anonymous> (index.js:11:15)
    at Module._compile (module.js:435:26)
    at loader (/Users/eric/Dropbox/dev/universal-react-boilerplate/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/eric/Dropbox/dev/universal-react-boilerplate/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:356:32)

Reproduce

To reproduce, pull the broken-example branch of the Universal React Boilerplate.

node --version
v4.2.2

npm --version
3.5.0

OSX El Capitan v10.11.1 (15B42)

[timdorr]

The example is based on react-router 2.0.0. If you're using 1.0.3, you have to use the createXHistory functions from history to create your history instance. The browserHistory singleton doesn't exist in that version.

[ericelliott]

Perhaps the README could make the version requirements clear. I went so far as to copy the versions out of the example in this repo trying to get it to work. =)

[timdorr]

Yeah, this has come up a couple times now. I'll add a blurb. Thanks!

[ericelliott]

FYI, it still doesn't work (same error) with these versions:

  "dependencies": {
    "express": "4.13.3",
    "react": "0.14.5",
    "react-dom": "0.14.2",
    "react-redux": "4.0.0",
    "react-router": "2.0.0-rc5",
    "redux": "3.0.4",
    "redux-logger": "2.0.4",
    "redux-simple-router": "2.0.3",
    "redux-thunk": "1.0.0"
  }

What part of the magic combination am I missing? =)

[timdorr]

Make sure you've got the right version actually installed. browserHistory is definitely part of the 2.0 API.

[mjrussell]

@timdorr @ericelliott its probably because you are loading that store on both client and server. browserHistory is undefined for server side since 2.0-rc3
remix-run/react-router@56d4496

[ericelliott]

I nuked my node_modules folder from orbit and ran a fresh npm install. Like 6 times. ;)

But here's the manual confirmation...

      "[email protected]",

[timdorr]

Ah yes, @mjrussell has it. Our example is for the client only. You can use a memory history for the server.

[ericelliott]

its probably because you are loading that store on both client and server. browserHistory is undefined for server side since 2.0-rc3

Ah, that sounds like it could be the culprit.. suggestions for universal apps?

[ericelliott]

You can use a memory history for the server.

Sounds perfect. How? Are there docs?

[ericelliott]

To simplify, I stripped history out of the server render completely, but the client render example is still borked. I think a minimal example in the examples folder here that demonstrates universal route & render with redux-simple-router would be a fantastic addition. I've spent a couple solid days trying to get this working. Seems like an endless jump from one error to another. =)

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).warning @ warning.js:45
browser.js:49 Warning: [react-router] Location "/test-data" did not match any routeswarning @ browser.js:49
warning.js:45 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <noscript data-reacti
 (server) <div data-reactid=".z

[ericelliott]

Fixed, but I still think a minimal example of universal route & render with redux-simple-router would be tremendously beneficial. =)