I'm setting up a React Redux with a Provider but it always comes back with an error message saying that ./store not being found. What I'm doing wrong here? and What do I need to set up in index.js file?
This is first I have looked at the React.js Redux website to tried to set up Provider and setup react-cookies.
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/main.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { CookiesProvider } from 'react-cookie';
import store from './store'
const rootElement = document.getElementById('cantainer')
ReactDOM.render(
<Provider store={store}>
<CookiesProvider>
<App />,
rootElement
</CookiesProvider>
</Provider>
);
serviceWorker.unregister();
import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './sass/main.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux'
import { CookiesProvider } from 'react-cookie';
import store from './store'
const rootElement = document.getElementById('cantainer')
ReactDOM.render(
<Provider store={store}>
<CookiesProvider>
<App />,
rootElement
</CookiesProvider>
</Provider>
);
This is error message:
./src/index.js
Module not found: Can't resolve './store' in '/Users/mirasmith/Desktop/KPV1-Project-master/src'
Related
index.js file:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
store.js file:
import { configureStore } from '#reduxjs/toolkit';
import userReducer from '../features/userSlice';
export default configureStore({
reducer: {
user: userReducer,
},
});
ERROR:- ERROR in ./src/index.js 16:11-16
export 'store' (imported as 'store') was not found in './app/store'
(possible exports: default)
You export store as default export you need to import it as default
index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './app/store';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './index.css';
const container = document.getElementById('root');
const root = createRoot(container);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
reportWebVitals();
You are wrong coming from two reasons:
Reason number one: you already export the store as default and you import it with {} the first thing you should remove is the {}. to be like below:
import store from './app/store';
Reason number one:
Write store in capital letters to be Store finally to be like below:
import Store from './app/store';
i just got this error after trying to connect my firestore to the reducer and as i noticed that cnt get any data from my firestore so the problem is here in the index.js file because it happened after i was doing the migration between v2 to v3 and that when the error starts so plzz if you can help me find out the problem
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore, applyMiddleware, compose } from 'redux'
import rootreducer from './store/reducers/rootreducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore, reduxFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase} from 'react-redux-firebase'
import fbconfig from './config/fbconfig'
import firebase from 'firebase/app'
const store = createStore(
rootreducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
reduxFirestore(firebase, fbconfig)
)
);
const rrfProps = {
firebase,
config: fbconfig,
dispatch: store.dispatch,
createFirestoreInstance
};
ReactDOM.render(
<React.StrictMode>
<Provider store={store}><App />
<ReactReduxFirebaseProvider{...rrfProps}>
</ReactReduxFirebaseProvider>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
this is my dashboard.js export when added compose the error occured
export default compose(
connect(mapStateToProps),
firestoreConnect([
{collection: 'projects'}
])
)(Dashboard)
I've just fixed it with the help of Kevin Moe Myint Myat by putting <App/> inside the ReactReduxFirebaseProvider as shown below
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<ReactReduxFirebaseProvider{...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
In my site.js file i import the store from index.ts
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import App from '../components/site/App'
import {store} from '../components/site/src/app-config/index.ts'
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>, document.getElementById('root'))
export const store = createStore(rootReducer(history), applyMiddleware(thunk))
I got problem in the browser console:
browser.js:34 Uncaught Invariant Violation: You must pass a component
to the function returned by connect. Instead received {}
Im trying to migrate from react-redux v2 to v3 and start to use the ReactReduxFirebaseProvider. But I don't know why I get:
Line 22: 'firebase' is not defined no-undef
This is my code:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore, applyMiddleware, compose } from 'redux'
import rootReducer from './store/reducers/rootReducer'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createFirestoreInstance, getFirestore } from 'redux-firestore'
import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
import fbConfig from './config/fbConfig'
const store = createStore(rootReducer,
compose(
applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore }))
)
);
const rrfProps = {
firebase,
config: fbConfig,
dispatch: store.dispatch,
createFirestoreInstance
}
ReactDOM.render(
<Provider store={store}>
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
</Provider>, document.getElementById('root'));
registerServiceWorker();
Can someone point me in the right direction of what I am doing wrong?
Include this in your code:
import firebase from 'firebase/app'
fist thanks for your attention.
I am trying to use fela for dynamically styling my component. Also for manage the states of app, we need to use redux. In fela we need to use a Provider to wrap all component of app. also in redux we have the same thing. for example the root of the app we have :
import { createRenderer } from 'fela'
import { Provider } from 'react-fela'
import { render } from 'react-dom'
import React from 'react'
const renderer = createRenderer()
render(
<Provider renderer={renderer}>
<App />
</Provider>,
document.getElementById('app')
)
and in root of redux app we have:
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
And my problem is how to use this packages together.
when use as syntax in import can solve this problem. for example:
import React from 'react'
import { render } from 'react-dom'
import { Provider as ReduxProvider } from 'react-redux'
import { Provider as FelaProvider } from 'react-fela'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp)
render(
<ReduxProvider store={store}>
<FelaProvider>
<App />
</FelaProvider>
</ReduxProvider>,
document.getElementById('root')
)