I'm trying to upgrade from react-redux (https://www.npmjs.com/package/react-redux) to 7.x from 5.x, to use hooks and have reached some breaking changes with the connect() function. It keeps giving me an error that I must wrap my app in a provider, which I already have.

Error:

Uncaught (in promise) Invariant Violation: Could not find "store" in either the context or props of "Connect(DateRangeSelector)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(DateRangeSelector)".

Provider Code:

import React from 'react';
import { Provider } from 'react-redux';

import store from 'scripts/setup';
import FullReactComponent from 'root/FullReactComponent';


const App = () => (
  <Provider store={store}>
      <FullReactComponent />
  </Provider>
);

export default App;

Connect code:

FullReactRootComponent.propTypes = {
  bgColor: PropTypes.string.isRequired,
};

export const mapStateToProps = ({ portal }) => ({
  bgColor: portal.get('bgColor'),
});

export const mapDispatchToProps = {
  fetchEnabledRoutes: actions.fetchEnabledRoutes,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(FullReactRootComponent);

Has anyone ran into this issue upgrading as well? Is there a change in the connect API?

Edit: Here's an example of how Connect isn't being called properly between two snapshots:

5.x:

 <Connect(ModalComponent) open={true}>
   <ModalAdd /> 
</Connect(ModalComponent)>

7.x:

<ModalComponent
  open={true}
/>