I want to create a project using npm, and want to use react-bootstrap inside it. I have package.json with the following dependencies.
{
"name": "simple-webapp",
"version": "0.0.1",
"description": "",
"scripts": {
"build": "gulp build",
"watch": "gulp watch --color",
"test": "echo \"This project doesn't have any tests.\" && exit 0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "3.8.11",
"qwest": "^1.5.12",
"react": "0.13.2",
"syrup": "0.1.14",
"bootstrap": "3.3.5",
"react-bootstrap": "0.13.3",
"react-router": "0.13.3"
}
}
When I run npm install I get:
npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
> [email protected] install /Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/node_modules/syrup/node_modules/watchify/node_modules/chokidar/node_modules/fsevents
> node-gyp rebuild
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance
SOLINK_MODULE(target) Release/.node
SOLINK_MODULE(target) Release/.node: Finished
CXX(target) Release/obj.target/fse/fsevents.o
SOLINK_MODULE(target) Release/fse.node
SOLINK_MODULE(target) Release/fse.node: Finished
[email protected] node_modules/qwest
[email protected] node_modules/react-bootstrap
[email protected] node_modules/react-router
├── [email protected]
└── [email protected]
[email protected] node_modules/gulp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
[email protected] node_modules/bootstrap
[email protected] node_modules/react
└── [email protected] ([email protected], [email protected])
[email protected] node_modules/syrup
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected])
Is it successfully installed?
Inside my app/main.jsx I have a button:
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Something
</Button>
When I run npm run build, I get:
/Users/i-danielk/ideaProjects/webapi_bootstrap/webapp/app/main.js
line 27 col 33 'Button' is not defined.
line 27 col 88 'someCallback' is not defined.
Where I am doing it wrong?
Looks like the install worked. What's causing your errors is that you did not require react-bootstrap so Button is undefined. The other error is just that you forgot to add this (has to be onClick={this.someCallback} where someCallback needs to be in your React Component.
To import react-browserifies Button you need to add
var Button = require('react-bootstrap').Button
to your app.jsx file