I have been working on a web application using react.js, react-router, and webpack. I wanted to style it using react-bootstrap for the navbar, but it seems that my navbar is not getting styled properly as shown in the documentation here
Here is the react-bootstrap code I am using:
<Navbar inverse fixedTop>
<Navbar.Collapse>
<Nav bsStyle="pills">
<NavItem href="#"><Link to="/">{this.state.navMenu[0] }</Link></NavItem>
<NavItem href="#"><Link to="/utilities">{this.state.navMenu[3] }</Link></NavItem>
<NavItem href="#"><Link to="/main">{this.state.navMenu[4] }</Link></NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
Below are the dependencies:
"devDependencies": {
"babel-cli": "^6.4.0",
"babel-core": "^6.4.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.1",
"file-loader": "^0.8.5",
"history": "^1.17.0",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"style-loader": "^0.13.0",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1"},
"dependencies": {
"bootstrap": "^3.3.6",
"imports-loader": "^0.6.5",
"react": "^0.14.6",
"react-bootstrap": "^0.28.2",
"react-router": "^2.0.0-rc5"
}
Here is the webpack.config file:
var webpack = require('webpack');
module.exports = {
entry: [
'babel-polyfill',
'webpack/hot/only-dev-server',
"./app.js",
],
output: {
path: __dirname + '/build',
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
{ test: [/\.jsx?$/, /\.es6$/], exclude: /node_modules/, loader: 'babel-loader' },
{ test: /\.css$/, loader: 'style!css' },
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
},
plugins: [
new webpack.NoErrorsPlugin(),
]
};
I've attempted to require 'bootstrap' but encountered this error: Uncaught ReferenceError: jQuery is not defined
Any assistance would be greatly appreciated.