So I'm building a react-JS website with express serving the back-end. I'm using react-router and react-stormpath for authentication. Using webpack as well. I'm having issues with bootstrap javascript loading. I installed react-bootstrap and am serving the css file from express with no problem. However, when I try to render, I get several errors, one pertaining to ReactDOM not recognizing
ReactDOM(Uncaught ReferenceError: ReactDOM is not defined(…)), and another 2 pertaining to bootstrap(Uncaught TypeError: Cannot read property 'PropTypes' of undefined(…) & Uncaught SyntaxError: Unexpected token :). This is my first React application, so any help would be greatly appreciated!
/* jshint esversion: 6 */
import React, { PropTypes } from 'react'
import ReactDOM from 'react-dom'
import { LoginLink } from 'react-stormpath'
import ReactStormpath, { Router, HomeRoute, LoginRoute, AuthenticatedRoute } from 'react-stormpath'
import { Link, IndexRoute, Route, browserHistory } from 'react-router'
import { MasterPage, IndexPage, LoginPage, RegistrationPage, ProfilePage } from './pages'
import Index from './components/Index'
import index from './pages/index'
console.log("app.js loaded");
ReactStormpath.init();
ReactDOM.render(
<Router history={browserHistory}>
<HomeRoute path='/' component={MasterPage}>
<IndexRoute component={IndexPage} />
<LoginRoute path='/login' component={LoginPage} />
<Route path='/register' component={RegistrationPage} />
<AuthenticatedRoute>
<HomeRoute path='/profile' component={ProfilePage} />
<Route path='/:user/lists' component={List} />
</AuthenticatedRoute>
<Route path='/lists' component={List} >
<Route path="/lists/:list" component={List} />
</Route>
</HomeRoute>
</Router>,
document.getElementById('app')
);
ReactDOM.render(
<ListForm />,
document.getElementById('app')
);
