React-redux: Invalid context `storeSubscription` of type `Subscription`...

[chrisvasz]

I am seeing the following error in the Chrome dev tools:

Warning: Failed context type: Invalid context `storeSubscription` of type `Subscription` supplied to `Connect(connectForm(Form))`, expected instance of `Subscription`.

The error happens when I @connect a component that contains another connected component somewhere deeply in the tree. The error is on the nested component, not the parent component. I have tried boiling this down to a minimally reproducible case, but I am having trouble coming up with one. When I remove the @connect from my top-level component, the error goes away. I haven't noticed any functional problems.

Any suggestions on creating a reproducible case?

FYI, the following case does not produce the error in the console:

@connect(state => ({
  hello: true,
}))
class Outer extends React.Component {
  render() {
    return <Child><Inner /></Child>;
  }
}

class Child extends React.Component {
  render() {
    return this.props.children;
  }
}

@connect(state => ({
  hello: true,
}))
class Inner extends React.Component {
  render() {
    return <span>hello</span>;
  }
}

render(<Provider store={store}><Outer /></Provider>, document.body);

[markerikson]

Hmm. For reference, are you using the React-Redux v5 beta release?

[chrisvasz]

Whoops -- meant to include that in the original note. Yes, I am using 5.0.0-beta.3.

(PS -- And it's awesome!)

[jimbolla]

Is it possible you have 2 copies of React Redux loading?

[chrisvasz]

Actually yes, that is exactly what's happening. Sorry for the false alarm!

For future reference: React uses the instanceof operator to check the type of StoreSubscription. Since I had two copies of React Redux loading, the left side of the instanceof check was a StoreSubscription from React Redux A, and the _right_ side of the instanceof check was from React Redux B. Whoops!

[plandem]

Sorry, guys...but I have same error and still can't fix it. What do you mean 'two copies of React Redux loading'? In my case it looks like only one connect per component.

p.s.: I'm not sure, but my 'root' component connects to redux and also using own context.

[jimbolla]

It means you're code is including more than one copy of react-redux. If you see this error, you likely have issues with how your app is being bundled.

[plandem]

@jimbolla I include only once react-redux at each component where connect is required :(

[plandem]

@jimbolla

1) I have npm package with component that connects to redux (so it has dependency on react-redux). let's name it MyProvider

2) in my application I also connect other components, so it depends on react-redux

I moved MyProvider from npm package directly to application and there is no error anymore.

Is problem here?

[jimbolla]

I don't know enough about how you're bundling your code to be able to give you specific advice. General advice: run npm update and npm dedupe to make sure you don't have extraneous packages. If you're using webpack, you can use its visualizer tools to see specifically what's being included in your bundle.

[chrisvasz]

@plandem My problem was that I was creating two bundles: common.js and a page-specific js file. Because of an error in the way I was bundling, the code for react-redux ended up in both bundles.

[plandem]

ok, finally I moved redux support into differ npm package with peerDependency. Now it works fine. Thanks.

[Elijen]

Happened to me today after upgrading react-redux. Seems to be caused by hot reloading. Simply restarting webpack-dev-server solved the issue.

[bjbrewster]

I also had this problem. For me, I had a duplicate react-redux due to using react-intl-redux that has listed react-redux as a dependency and not a peer dependency. I've decided to remove this package from my project and just use react-intl provider directly.