Using `react-bootstrap` with `npm`

Question

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?

It looks like you may not have loaded the react-bootstrap Button properly, but can't tell from what you have posted. Can you include the relevant parts of your main.jsx? — Mark
– Mark, Commented Jun 19, 2015 at 22:07

David Langer · Accepted Answer · 2015-06-19 22:08:53Z

2

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

answered Jun 19, 2015 at 22:08

David Langer

2961 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andre Pena Over a year ago

That's the answer... Alternatively do var button = require("react-bootstrap/lib/Button");

Collectives™ on Stack Overflow

Using `react-bootstrap` with `npm`

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related