Larsrdev
commented
5 years ago We have a similiar issue:
We updated from - to "react-redux": from "5.0.7" to "7.1.0", "react-router": from "4.3.1" to "5.0.1", "react-router-dom": from "4.3.1" to "5.0.1", "connected-react-router": from "4.4.1" to "6.5.0",
React were not updated during the process: "react": "16.8.6", "react-dom": "16.8.6",
This is some part of our code:
const reducers= combineReducers({
router: connectRouter(history),
...someOtherReducers...
});
const history = createBrowserHistory();
const routerMw = routerMiddleware(history);
let middleware = [routerMw, someOtherMiddlewares];
appliedMiddleware = compose(appliedMiddleware);
const store = createStore(reducers, undefined, appliedMiddleware);
render((
<Provider store={store}>
<ConnectedRouter history={history}>
<Route component={withTracker(AppConnected)}/>
</ConnectedRouter>
</Provider>
),
document.getElementById('app') as HTMLElement
);
This works pretty well on our local build with the libs code from the node_modules directory.
But our deployment build fails when using packages from CDN (unpkg):
We managed to find out this Problem and added a context to the Provider and ConnectedRouter:
render((
<Provider store={store} context={ReactReduxContext}>
<ConnectedRouter history={history} context={ReactReduxContext}>
<Route component={withTracker(AppConnected)}/>
</ConnectedRouter>
</Provider>
),
document.getElementById('app') as HTMLElement
);This also works with node_modules libs but fails with another error in production build:
Thats odd, because we use a Connected Router?! In spite of all we wrapped the Route component in a Router:
render((
<Provider store={store} context={ReactReduxContext}>
<ConnectedRouter history={history} context={ReactReduxContext}>
<Router history={history}>
<Route component={withTracker(AppConnected)}/>
</Router>
</ConnectedRouter>
</Provider>
),
document.getElementById('app') as HTMLElement
);Does not look right. But still works in local mode with node_modules, but also fails with CDN packages:
We see no other way to downgrade back to older versions. Have we missed something? Is there a problem on cdn packages? Did we make a mistake after updating?
Thanks a lot :)
favna
royipressburger
IAMSBLOL
benoitvallon
dider7
Z-HNAN
juja0
johnpangalos
RyanPWalker
yang-jandro
Nodirbek-Sharipov
Last week I upgrade router related packages in my project after that, I am getting 2 errors while running the project.
Packages which are updated from and to versions
The error which I am getting
Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(t)". Either wrap the root component in a, or explicitly pass "store" as a prop to "Connect(t)"
Uncaught Error: Invariant failed: You should not use <withRouter(InjectIntl(Component)) /> outside a
Before upgrading everything is working fine.
App.js
import React from 'react'; import { Provider } from 'react-redux'; import { IntlProvider, addLocaleData } from 'react-intl'; import { browserHistory } from;
import en from 'react-intl/locale-data/en';
import xh from 'react-intl/locale-data/xh';
import initialState from './state/initialState';
import { configureStore } from './store/configureStore';
import RestApi from './services/RestApi';
import AppContainer from './components/AppContainer';
import { findUserLocale } from './i18n/i18n';
// If needed can pass initialState to configureStore const history = browserHistory; const store = configureStore(initialState, history); RestApi.store = store; addLocaleData([...en, ...xh]); const locale = findUserLocale();
let messages; try { messages = require(
./i18n/${locale}.json); // eslint-disable-line } catch (e) { messages = require('./i18n/en-US.json'); // eslint-disable-line global-require } const App = () => ();
export default App;
AppContainer.js
only required code copied here.
Do I need to pass anything to Provider and ConnectedRouter according to connected-react-router v6.5.0 to run properly?
Please let me know how to fix these 2 issues.