Develop Reference

Uncaught Error: You are loading the CommonJS build of React Router on a page that is already running the ES modules build, so things won't work right

I am trying using this BrowserRoute in my App.js , it is giving me the following error since a long time , unable to resolve this please help me with this.I have installed react-router-dom#5
Here is my code for App.js
import react from 'react'
import Homepage from "./Pages/Homepage"
import ChatPage from "./Pages/ChatPage"
import { Route } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom/cjs/react-router-dom.min';
function App() {
return (
<div className="App">
<BrowserRouter>
<Route exact path = "/" component = {Homepage}/>
<Route exact path = "/chats" component = {ChatPage}/>
</BrowserRouter>
</div>
);
}
export default App;

import { Route, BrowserRouter } from 'react-router-dom';

property 'pathname' undefined in React Routers

I am following a tutorial on youtube on building a landing page, but I got stuck on this phase.
Uncaught TypeError: Cannot read property 'pathname' of undefined at new Router
Here is the code:
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
ReactDOM.render(
<Router>
<App />
</Router>,
document.getElementById("root")
);
serviceWorker.unregister();
The tutorial I am following is using react-router version 5.0.1
Also here is my App.js code that is being used in index.js:
import "./css/App.css";
import { Switch, Route } from "react-router-dom";
import Main from "./pages";
function App() {
return (
<div>
<Switch>
<Route path="/" component={Main} />
</Switch>
</div>
);
}
export default App;
Added Main.js code
import Header from "../components/Header";
class Main extends Component {
render() {
return (
<div>
<Header />
</div>
);
}
}
export default Main;
I tried searching for changes but was unsuccessful in finding a solution that worked.

Different Problem: React store.getState is not a function

Here is my code:
store.js
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
(window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()) ||
compose
)
);
App.js
import React, { Component } from 'react';
import './sass/main.scss';
import { BrowserRouter as Router, Route } from "react-router-dom";
import Landing from './components/pages/Landing';
import { Provider } from "react-redux";
import store from "../src/store";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Route exact path='/' component={Landing}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
</div>
</Router>
</Provider>
);
}
}
export default App;
I can't find where the problem is. I tried to debug it, but can't found what really make it those error. error: Uncaught TypeError: store.getState is not a function.
./src/App.js
Attempted import error: '../src/store' does not contain a default export (imported as 'store').
The first thing tried is adding a export default createStore but that bring up other error message saying Line 10: 'store' is assigned a value but never used and TypeError: store.getState is not a function

In your App.js you are trying to import store from "../src/store";. So system will try to import something from ../src/store.js but you never export any variable in that file.
You can update store.js to add export statement
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(...middleware),
(window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()) ||
compose
)
);
export default store;

React-router + electron Location "/" did not match any routes

I just started with electron and I've been having difficulties integrating react-router with it. I keep on getting this warning whatever I do:
Warning: [react-router] Location "/" did not match any routes
Router:
"use babel"
import React from 'react'
import { Router, hashHistory } from 'react-router'
/* ******************
IMPORTS
*********************/
import {routes} from './routes'
const App = () => {
return (
<Router history={hashHistory} routes={routes} />
);
}
export default App
Routes:
"use babel"
import React from 'react'
import { Route, IndexRoute } from 'react-router';
/* ******************
IMPORTS
*********************/
import App from './src/app.js'
import Root from './src/root'
export default (
<Route path="/" component={Root} />
);
Root:
import React, { Component } from 'react'
export default class Root extends Component {
render() {
return (
<div>test</div>
);
}
}
I noticed that react-router is adding the hashtag before the slash. I am pretty sure that I did a rookie mistake somewhere but I can't find out what's wrong...
URL: file:///C:/wamp/www/electron_projects/projectOne/index.html#/
I have read other similar questions but no luck. Your help would be really appreciated.

Because there is a mismatch between the way you are importing and exporting, use either named or default import/export.
Default import/export:
import routes from './routes';
Define it like this in routes.js:
let routes = (
<Route path="/" component={Root} />
);
export default routes;
named import/export:
import {routes} from './routes';
Define it like this in routes.js:
let routes = (
<Route path="/" component={Root} />
);
export routes;
Since your are returning all the routes by App component, so render that component by ReactDOM.render, like this:
ReactDOM.render(
<App/>,
document.getElementById('app')
);
Read the difference between these two: https://danmartensen.svbtle.com/build-better-apps-with-es6-modules

You are exporting your routes like this:
export default (
<Route path="/" component={Root} />
);
Therefore you need to import them like this:
import routes from './routes'
Default exports are unnamed, and therefore need to be imported without brackets. If you surround it with brackets, it looks for a named export.
Update
It's worth noting that you can import them by any name you choose. It's an unnamed export, so it doesn't matter what you name the import. You could (but wouldn't) import it like this instead:
import foo from './routes'
And it wouldn't make a difference.

You may not be using your Router component in your code, the place where rendering into dom via ReactDOM.
Please check below the working code snippet.
let Router = ReactRouter.Router;
let RouterContext = Router.RouterContext;
let Route = ReactRouter.Route;
const Root = (props) => {
return (
<div>
<h1>test</h1>
</div>
);
};
const routes = (
<Route path="/" component={Root} />
);
const router = (
<Router history={ReactRouter.hashHistory} routes={routes}/>
);
ReactDOM.render(
router,
document.getElementById('test'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.0/ReactRouter.min.js"></script>
<div id="test"></div>

reactjs router cannot read render of undefined

I'm putting together my first react based app. I had a working application and have since woven in the react router. I am transpiling with babel.
I get the following the the developer console in chrome -
Uncaught TypeError: Cannot read property 'render' of undefined
at Object.1../components/Login (http://localhost:8000/bundle.js:90:19)
at s (http://localhost:8000/bundle.js:1:254)
at e (http://localhost:8000/bundle.js:1:425)
at http://localhost:8000/bundle.js:1:443
I have the following component at components/Login.js
import React, { Component } from 'react';
class Login extends React.Component {
render() {
return (
<nav>
<ul>
<li>Sign Up Now</li>
<li><a className="button button-primary" href="#">Sign In</a></li>
</ul>
</nav>
);
}
}
export default Login
Within my app.js I have the following -
'use strict';
import React from 'react';
import { ReactDOM, render } from 'react-dom';
import { browserHistory, Router, Route, Link, withRouter } from 'react-router';
import {Login} from './components/Login';
const App = React.createClass({
render() {
return (
<div>
<h2>Title</h2>
<Options/>
</div>
)
}
})
const Logout = React.createClass({
render() {
return <p>You are now logged out</p>
}
})
const Profile = React.createClass({
render() {
//const token = auth.getToken()
return (
<div>
<h1>Profile</h1>
<p>You made it!</p>
//<p>{token}</p>
</div>
)
}
})
function requireAuth() {
console.log("here");
}
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<Route path="login" component={Login} />
<Route path="logout" component={Logout} />
<Route path="profile" component={Profile} onEnter={requireAuth} />
</Route>
</Router>
), document.getElementById('app'));
I believe my error to be in the way in which I am export/ importing my components as the error exists with another component and when I change which is imported first in the above the error falls to that component.
I've tried various things such as adding {} to the import, adding default to the export and adding other imports into the component such as react-dom.
I'm building using the following
babel -presents react,es2015 js/source -d js/build
browserify js/build/app.js -o bundle.js
cat css/*/* css/*.css | sed 's/..\/..\/images/images/g' > bundle.css
date; echo;
Can anyone advise - I've been on this for 3 evenings now. I just don't get why render is undefined when it previously worked when using without the router.

Does changing the Login import line to import Login from './components/Login'; fix it?

Changing
import ReactDOM, { render } from 'react-dom';
to
import { ReactDOM, render } from 'react-dom';
Did the trick - I also hadn't set a browserhistory in the router which caused a secondary fault.

Change import {Login} from './components/Login'; to import Login from './components/Login';. Remember that when exporting something with default you don't need to include the {}.