Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error instantiating router #69

Closed
rcambrj opened this issue Feb 20, 2019 · 5 comments
Closed

Error instantiating router #69

rcambrj opened this issue Feb 20, 2019 · 5 comments

Comments

@rcambrj
Copy link
Contributor

rcambrj commented Feb 20, 2019

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
Copy link
Owner

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
Copy link
Owner

catamphetamine commented Feb 21, 2019

@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
Copy link
Contributor Author

rcambrj commented Feb 21, 2019

@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
Copy link
Owner

Ok.
Thanks for the fix in the readme.

@catamphetamine
Copy link
Owner

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants