Error instantiating router

[rcambrj]

I've been following the example as closely as I can. I have managed to get the server to render, but when the browser renders I get this error. Can you please point me in the right direction?

Uncaught Invariant Violation: Could not find "store" in either the context or props of "ConnectedRouter". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "ConnectedRouter".
    at invariant (webpack:////.../node_modules/invariant/browser.js?:38:15)
    at new Connect (webpack:////.../node_modules/found/node_modules/react-redux/es/components/connectAdvanced.js?:132:57)
    at constructClassInstance (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:11222:18)
    at updateClassComponent (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:14346:5)
    at beginWork (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:15222:16)
    at performUnitOfWork (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:18789:12)
    at workLoop (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:18829:24)
    at HTMLUnknownElement.callCallback (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:149:14)
    at Object.invokeGuardedCallbackDev (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:199:16)
    at invokeGuardedCallback (webpack:////.../node_modules/react-dom/cjs/react-dom.development.js?:256:31)

react-website.js

import routes from './routes'
import container from './Container'

const reducers = {
  // don't any particular need reducers for now
};

export default {
  container,
  reducers,
  routes,
}

Container.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Provider } from 'react-redux'
import { hot } from 'react-hot-loader'

function Container({ store, children }) {
  console.log(store, children)
  return (
    <Provider store={store}>
    {children}
    </Provider>
  )
}

Container.propTypes = {
  store: PropTypes.object.isRequired
}

export default hot(module)(Container)

routes.js

import React from 'react'
import { Route } from 'react-website'

import App from './App'
import Example from './Example'

export default (
  <Route path="/" Component={ App }>
    <Route Component={ Example }/>
  </Route>
)

It looks like Container is wrapping the ConnectedRouter, and passing an object into it (with things like dispatch, subscribe, getState on it) which looks like a store. So I'm not entirely sure why this error would come about.

[catamphetamine]

Could not find "store" in either the context or props of "ConnectedRouter". Either wrap the root component in a , or explicitly pass "store" as a prop to "ConnectedRouter".

Yes, the default container is this one:

https://github.com/catamphetamine/react-website/blob/2ea5a6f59077c01c32e1af0ff9fe030b1322d142/source/redux/normalize.js#L27-L36

So, seems like you're providing your own container and you have <Provider/> there with the store so theoretically it would work.

I guess the issue is there:

node_modules/found/node_modules/react-redux

So, found has a bug when it has react-redux added in its dependencies instead of making it a peerDependency.
This results in found connect()-ing to a different context and waiting for a <Provider store/> in that context but the <Provider/> that's instantiated in container is from a different node_module so it is therefore in an entirely different context and so found throws an error that <Provider store/> is not found in found's context.

I posted a bug report in found repo:
4Catalyzer/found#244

[catamphetamine]

@rcambrj As a workaround, you could try deleting found/node_modules/react-redux and see if it works.
Or maybe you're using react-redux@6? In that case don't delete found/node_modules/react-redux.
This package has its peerDependency set to 5.x.
https://github.com/catamphetamine/react-website/blob/2ea5a6f59077c01c32e1af0ff9fe030b1322d142/package.json#L48-L53
I guess I should add in the readme that it won't work with react-redux@6.

[rcambrj]

@catamphetamine thanks for the quick response, that was indeed the problem, great sleuthing!

setting "react-redux": "^5.1.1" in package.json then yarn install solves the issue. Looks like found are upgrading to [email protected] in their next branch anyway, so might not be a problem for very long.

Thanks again.

[catamphetamine]

Ok.
Thanks for the fix in the readme.

[catamphetamine]

FYI:
I'm releasing a new version of this library and also renaming it to react-pages (currently 0.2.3).
It uses the latest found and react-redux now.
Seems to be working for now, I'll be running more tests later and version 1.0.0 will be released after that.