I'm new to webpack, I'm starting to build an app using webpack and react 15, however it's like the export default is not working properly because I got an error as the App component is not found:
5:9 App not found in './components/App' import/named
Below the code of my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import {Router,Route,IndexRoute,browserHistory} from 'react-router';
import { Provider } from 'react-redux';
import {App} from './components/App';
import {HomePage} from './components/HomePage';
import configureStore from './store/configureStore.js';
import { syncHistoryWithStore } from 'react-router-redux';
const store = configureStore();
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={HomePage}/>
</Route>
</Router>
</Provider>,
document.getElementById('app')
);
and the code of my App.js placed under components folder:
import React, { PropTypes } from 'react';
const App = (props) => {
return (
<div>
{props.children}
</div>
);
};
App.propTypes = {
children: PropTypes.element
};
export default App;
Can anyone see the problem? Looks like this type of export is not supported and I have to enable something?
Any help is appreciatted!!
Omit the curly braces:
import App from './components/App';
That's the trick with default, see.
Related
I am trying to run webpack dev server and I'm getting this error. History was working properly before i started using webpack module.
WARNING in ./src/history.js 2:15-35
export 'createBrowserHistory' (imported as 'createBrowserHistory') was not found in 'history' (possible exports: default)
# ./src/App.js 18:0-32 91:17-24
# ./src/index.js 4:0-24 11:20-23
History was working properly before i started using webpack module.
history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory({ forceRefresh: true });
App.js
import React, { Component } from "react";
import { Route, Routes, unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import Cookies from "universal-cookie";
import history from "./history";
import LoginComponent from "./Components/login/login";
import Authenticate from "./Components/authenticate/authenticate";
import Callback from "./Components/Callback/callback";
import Home from "./Components/home/home";
import "./App.css";
import axios from "axios";
class App extends Component {
constructor(props) {
super(props);
this.state = {};
this.cookies = new Cookies();
}
render() {
return (
<div>
<HistoryRouter history={history}>
<Routes>
{/* <Route path="/login" element={<LoginComponent />} /> */}
<Route path="/authenticate" element={<Authenticate />} />
<Route path="/users/twitter_callback" element={<Callback />} />
</Routes>
</HistoryRouter>
</div>
);
}
}
export default App;
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "bootstrap/dist/css/bootstrap.min.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
// <React.StrictMode>
<App />
// </React.StrictMode>
);
reportWebVitals();
any help will be apreciated
For anyone with this same issue. I solved it by putting the history file in a sub directory and renaming it. like this "./history/browserHistory.js". This is a github issue about it https://github.com/remix-run/history/issues/793
I'm trying to configure the react router dom route structure, but apparently my routes are not being recognized within the application
routes/index.tsx
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Routes, Route, Link } from "react-router-dom";
import {
Main,
} from '../scenes';
import { Routes as RoutesPath } from './routing';
const RoutesContainer: React.FC = () => (
<Routes>
<Route path={RoutesPath.MAIN} element={<Main />} />
</Routes>
);
export { Routes };
export default inject('routing')(observer(RoutesContainer));
index.tsx (aplication)
import React from 'react'
import { Provider } from 'mobx-react';
import { render } from 'react-dom'
import './index.css'
import store from './stores';
import { Routes } from './routes';
import { BrowserRouter } from 'react-router-dom';
render(
<Provider rootStore={store}>
<BrowserRouter>
<React.StrictMode>
<Routes />
</React.StrictMode>
</BrowserRouter>
</Provider>,
document.getElementById('root')
)
If I remove my component, and add some text it displays correctly, but with the component it displays a blank screen.
my react app works fine on my pc using google chrome (where I build it) but doesn't work on Microsoft edge, and also works fine in localhost, but on my laptop and phone it shows a blank page, my host is: http://dorian1.com/
i tried using hashrouter instead of browserrouter, adding "homepage" in my package.json,
my app.js is :
import React, { useState } from 'react'
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import './styles/App.css'
import Footer from './footer/Footer'
import Header from './header/Header'
import Search from './search/Search'
import Alert from './alert/Alert'
// PAGES
import News from './pages/news/News'
import Opinion from './pages/opinion/Opinion'
import Sport from './pages/sport/Sport'
import Culture from './pages/culture/Culture'
import Lifestyle from './pages/lifestyle/Lifestyle'
import SearchResults from './pages/searchResults/SearchResults'
import SingleArticle from './pages/SingleArticle/SingleArticle'
function App() {
const [alert, setAlert] = useState(null)
return (
<Router>
<Header />
<Alert alert={alert}/>
<Search setAlert={setAlert}/>
<Switch>
<Route exact path='/' component={News}/>
<Route path='/News' component={News}/>
<Route path='/Opinion' component={Opinion}/>
<Route path='/Sport' component={Sport}/>
<Route path='/Culture' component={Culture}/>
<Route path='/Lifestyle' component={Lifestyle}/>
<Route path='/SearchResults' component={SearchResults}/>
<Route path='/SingleArticle' component={SingleArticle}/>
</Switch>
<Footer />
</Router>
);
}
export default App;
the console on edge says :
Uncaught TypeError: Cannot read properties of undefined (reading 'apply')
at redux.js:621
at f (redux.js:154)
at Module.454 (store.js:11)
at a ((index):1)
at t ((index):1)
at Array.r [as push] ((index):1)
at main.a2301ff4.chunk.js:1
my index.js is :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// REDUX
import { Provider } from 'react-redux'
// import store from './store'
import { PersistGate } from 'redux-persist/integration/react'
import {store, persistor} from './store'
ReactDOM.render(
<Provider store={store}>
<PersistGate persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById('root')
);
i fixed it, my store js had thunk middleware imported but never used,
const middleware = [thunk];
export const store = createStore(rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
i removed the middleware and now its working , makes no sense but hope it helps someone
I'm doing very simple programme on react router..but I don't know what's going wrong with this...here is my react router code..
index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory} from 'react-router';
import routes from './routes';
ReactDOM.render(
<Router history={browserHistory} routes={routes} />
, document.querySelector('.container'));
and here is the routes file ..
routes.js
import React, { Component } from 'react';
import { Route, IndexRouter } from 'react-router';
import App from './components/app';
export default(
<Route path="/" component={App} />
);
it shows error something like this...
You need to use react-router-dom instead of react-router. I've created basic code sandbox for the same You can check code here. https://codesandbox.io/embed/m779xxx4zy.
App.js
import React from "react";
const App = props => {
return <div>HI</div>;
};
export default App;
Routes.js
import React from "react";
import { Route, Switch } from "react-router-dom";
import App from "./app";
const Routes = props => {
return (
<div>
<Switch>
<Route exact path="/" component={App} />
</Switch>
</div>
);
};
export default Routes;
index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import Routes from "./routes";
ReactDOM.render(
<BrowserRouter>
<Routes />
</BrowserRouter>,
document.querySelector(".container")
);
I have plugged react router 4 into my react-create-app and upon running npm run test I get the following error:
Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
in Switch (at App.js:17)
in main (at App.js:16)
in div (at App.js:15)
in App (at App.test.js:7)
I am using react-router#4.2.0, and react-router-dom#4.2.2
I have ensured my <Switch> component is nested within <BrowserRouter>.
App.js:
import React, { Component } from 'react';
import { Switch, Route, withRouter, Router } from 'react-router-dom';
import './App.css';
// Components
import Header from '../../components/header/Header';
import Nav from '../../components/nav/Nav';
import Dashboard from './../../containers/dashboard/Dashboard';
import Events from './../../containers/events/Events';
import NotFound from './../../containers/notfound/NotFound';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Nav />
<main id="main">
<Switch context="router">
<Route path="/" exact component={Dashboard} />
<Route path="/events" exact component={Events} />
<Route path="*" component={NotFound} />
</Switch>
</main>
</div>
);
}
}
export default App;
and my index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import Store from './store';
import App from './containers/app/App';
import './index.css';
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Anybody else come across this?
It is default test example of Create React App.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
Router context is provided in the 'index.js' file and doesn't exist when you run the test.
You should rewrite it next way:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
div
);
});
or move 'Provider' and 'BrowserRouter into 'App' component.