Redux integration failed during build
See original GitHub issueHi, I tried implementing gatsby and redux. I follow this example and it works in dev. However, when I try to build it, I got a webpack error:
WebpackError: Could not find "store" in either the context or props of "Connect(Template)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Template)".
Here is my gatsby-browser.js
import React from 'react'
import { Router } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk'
import {persistStore, autoRehydrate} from 'redux-persist'
import reducers from "./src/redux/reducers/"
import localForage from 'localforage'
exports.replaceRouterComponent = ({ history }) => {
const enhancer = compose(
applyMiddleware(thunk),
autoRehydrate()
)
let store = createStore(reducers, enhancer)
persistStore(store, {storage: localForage}, () => {
})
if (process.env.NODE_ENV === 'production') {
console.log = () => {}
}
const ConnectedRouterWrapper = ({ children }) => (
<Provider store={store}>
<Router history={history}>{children}</Router>
</Provider>
)
return ConnectedRouterWrapper
}
Issue Analytics
- State:
- Created 6 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
why do i get the Error Module not found: Can't resolve 'redux'
after running npm install @reduxjs/toolkit try restarting your server.
Read more >Module not found: Can't resolve 'redux' in React | bobbyhadz
The redux module should NOT be globally installed or be in your project's devDependencies , it should be in the dependencies object in...
Read more >Log Production Errors in Your React-Redux App and ...
New open source by Netguru will help you log your React-Redux app's state and reproduce the errors on development.
Read more >Writing Tests | Redux
Our recommendation for testing Redux-connected React components is via integration tests that include everything working together, with ...
Read more >Persist state with Redux Persist using Redux Toolkit in React
When using Redux Persist without using the Thunk middleware, we'd get an error in the browser's console reading a non-serializable value was ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@rppld the whole repo link helps a lot, thanks. It looks like you’re running into #2005. I was able to get your build to run by removing the styled components plugin from
gatsby-config.js
and then updatinggatsby-ssr.js
to use @akadop’s example code@habibridho I’m not sure what your new error is, if you’re able to create a minimal repo i can try and take a closer look. Based on the link in the error message, maybe something is not being imported correctly in your Template component?
I’m trying to create a minimal repo but I still could not reproduce the error (the project build well without error). I will try moving my components one by one in the morning and hopefully something will break and give us clue of what went wrong. I’ll keep you posted.
Thanks for the response anyway!