We Keep Coding

export 'store' (imported as 'store') was not found in './app/store' (possible exports: default)

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';

cannot render a <Router> inside another <Router>. You should never have more than one in your app

This is my index.js code
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import "#fortawesome/fontawesome-free/css/all.min.css";
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { createStore } from "redux";
import { userReducer } from "../src/reducers/UserReducer";
import { Provider } from "react-redux";
import { loadState, saveState } from "./store/LocalStorage";
const persistedState = loadState();
let store = createStore(userReducer, persistedState);
store.subscribe(() => saveState(store.getState()));
render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
This is the error I am getting on browser
"Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app."
Please help me with some solution.

I guess you are using React Router 6. They dropped support for nested Routers(like MemoryRouter inside of BrowserRouter or any other combinations)
https://github.com/remix-run/react-router/issues/7375
There is rather a hack with <UNSAFE_LocationContext.Provider but as name suggests it's not guaranteed this will work for any(even patch version) updates.
I suggest you either going back to V5 or getting rid of nesting.

How to fix Module not found: Can't resolve './store'

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'

How to use redux with fela and react?

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')
)

BrowserHistory not working for react-router

Currently my URL structure is still storing history in hash syntax.
Ex: http://localhost:3000/#/work?_k=otstr8
Im trying to have it use browserHistory from react-router to be displayed as:
http://localhost:3000/#/work
Here is my routes.js file:
//Import Dependencies.
import React from 'react';
import { Router, Route } from 'react-router'
import ReactDOM from 'react-dom';
//Import Components.
import AboutElement from '../views/about/about.jsx';
import WorkElement from '../views/work/work.jsx';
import ResumeElement from '../views/resume/resume.jsx';
//Set up routes.
let routes = (
<Router>
<Route path='/' component={AboutElement}/>
<Route path='/work' component={WorkElement}/>
<Route path='/resume' component={ResumeElement}/>
</Router>
);
export default routes;
My index.js file:
//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
//Import Routes.
import routes from './routes/routes.js';
ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'))
From what I have researched this syntax is correct for browserHistory? For some reason hash history is still being used. Any ideas why this is still happening?

Just install history as a seperate library and use this.
import { createHistory } from 'history'
const history = createHistory()

Just created my own variable for browserHistory.
//Import Dependencies.
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';
const browserHistory = createBrowserHistory();
//Import Routes.
import routes from './routes/routes.js';
ReactDOM.render(<Router history={browserHistory} routes={routes} />, document.getElementById('application'));
The syntax for the url is now:
localhost:3000/
localhost:3000/work
localhost:3000/resume
Which is great!