I am working with react. when I make changes in a file, after saving the file, my component gets rendered but I am not able to click/interact with the webpage. I need to refresh it again then only I can interact with the webpage. index.js file.
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import store from "./helpers/store";
import * as serviceWorker from "./serviceWorker";
import { App } from "./app";
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
if (module.hot) {
module.hot.accept();
}
serviceWorker.unregister();
Try this:
module.hot.accept('./App.js', () => {
const NextApp = require('./App.js').default;
ReactDOM.render(<NextApp />);
});
Related
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.
Hello I am writing simple app in react and my index.js looks like this. I'm configuring redux store and redux-persistor and i get this error after importing all stuff I need. Does anyone know how to fix this? I have eslint extension installed in vscode and cannot disable it because some package depends on it.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import * as serviceWorker from './serviceWorker';
import './index.css';
import App from './App';
import { store, persistor } from './redux/store';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
Why my project show Index of folder when build, but when it running, it works
My Index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";
import { HashRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import createBrowserHistory from "history/createBrowserHistory";
const store = createStore(rootReducer);
const history = createBrowserHistory();
ReactDOM.render(
<Provider store={store}>
<HashRouter history={history}>
<App />
</HashRouter>
</Provider>,
document.getElementById("root")
);
My App.js
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<div>
<h1>ABC</h1>
</div>
);
}
}
When i call my index.html and my bundle.js after build
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.
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.