javascript - Using `react-bootstrap` with `npm` -
i want creat project using npm
, , want use react-bootstrap
inside it. have package.json
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 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 run npm install
get:
npm warn package.json simple-webapp@0.0.1 no description npm warn package.json simple-webapp@0.0.1 no repository field. npm warn package.json simple-webapp@0.0.1 no readme data > fsevents@0.3.6 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, active developer directory '/library/developer/commandlinetools' command line tools instance xcode-select: error: tool 'xcodebuild' requires xcode, active developer directory '/library/developer/commandlinetools' 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 qwest@1.7.0 node_modules/qwest react-bootstrap@0.13.3 node_modules/react-bootstrap react-router@0.13.3 node_modules/react-router ├── object-assign@2.1.1 └── qs@2.4.1 gulp@3.8.11 node_modules/gulp ├── pretty-hrtime@0.2.2 ├── interpret@0.3.10 ├── deprecated@0.0.1 ├── archy@1.0.0 ├── minimist@1.1.1 ├── tildify@1.1.0 (os-homedir@1.0.0) ├── v8flags@2.0.7 (user-home@1.1.1) ├── semver@4.3.6 ├── chalk@0.5.1 (ansi-styles@1.1.0, escape-string-regexp@1.0.3, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0) ├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5) ├── gulp-util@3.0.5 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, beeper@1.1.0, lodash._reinterpolate@3.0.0, object-assign@2.1.1, replace-ext@0.0.1, vinyl@0.4.6, chalk@1.0.0, lodash.template@3.6.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11) ├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1) └── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.2, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6) bootstrap@3.3.5 node_modules/bootstrap react@0.13.2 node_modules/react └── envify@3.4.0 (through@2.3.7, jstransform@10.1.0) syrup@0.1.14 node_modules/syrup ├── minimist@1.1.0 ├── q@1.0.1 ├── run-sequence@1.0.2 (chalk@1.0.0) ├── jshint-stylish@1.0.0 (text-table@0.2.0, string-length@1.0.0, chalk@0.5.1, log-symbols@1.0.2) ├── vinyl-source-stream@1.1.0 (vinyl@0.4.6, through2@0.6.5) ├── gulp-plumber@1.0.0 (through2@0.6.5) ├── gulp-replace@0.5.3 (istextorbinary@1.0.2, replacestream@2.0.0, through2@0.6.3) ├── gulp-sourcemaps@1.5.1 (graceful-fs@3.0.8, convert-source-map@1.1.1, strip-bom@1.0.0, vinyl@0.4.6, through2@0.6.5) ├── vinyl-buffer@1.0.0 (through2@0.6.5, bl@0.9.4) ├── del@0.1.3 (is-path-cwd@1.0.0, each-async@1.1.1, is-path-in-cwd@1.0.0, globby@0.1.1, rimraf@2.4.0) ├── gulp-if@1.2.5 (through2@0.6.5, gulp-match@0.2.1, ternary-stream@1.2.3) ├── express@4.10.1 (merge-descriptors@0.0.2, utils-merge@1.0.0, cookie@0.1.2, fresh@0.2.4, escape-html@1.0.1, range-parser@1.0.2, cookie-signature@1.0.5, finalhandler@0.3.2, vary@1.0.0, media-typer@0.3.0, methods@1.1.0, parseurl@1.3.0, serve-static@1.7.2, content-disposition@0.5.0, path-to-regexp@0.1.3, depd@1.0.1, qs@2.3.2, on-finished@2.1.1, debug@2.1.3, etag@1.5.1, proxy-addr@1.0.8, send@0.10.1, accepts@1.1.4, type-is@1.5.7) ├── gulp-util@3.0.1 (lodash._reinterpolate@2.4.1, vinyl@0.4.6, chalk@0.5.1, lodash.template@2.4.1, through2@0.6.5, multipipe@0.1.2, dateformat@1.0.11, lodash@2.4.2) ├── watchify@2.4.0 (through2@0.5.1, chokidar@0.12.6) ├── gulp-uglify@1.1.0 (deepmerge@0.2.10, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, uglify-js@2.4.16) ├── gulp-cache-breaker@0.0.3 (gulp-replace@0.4.0, checksum@0.1.1, request@2.58.0) ├── stringify@3.1.0 (through@2.3.7, stream-spec@0.3.5, html-minifier@0.6.9) ├── browserify@9.0.3 (https-browserify@0.0.0, tty-browserify@0.0.0, builtins@0.0.7, constants-browserify@0.0.1, process@0.10.1, path-browserify@0.0.0, os-browserify@0.1.2, isarray@0.0.1, inherits@2.0.1, commondir@0.0.1, string_decoder@0.10.31, stream-browserify@1.0.0, defined@0.0.0, has@1.0.0, shell-quote@0.0.1, subarg@1.0.0, domain-browser@1.1.4, xtend@3.0.0, shallow-copy@0.0.1, duplexer2@0.0.2, deep-equal@1.0.0, querystring-es3@0.2.1, assert@1.3.0, punycode@1.2.4, util@0.10.3, through2@1.1.1, events@1.0.2, timers-browserify@1.4.1, concat-stream@1.4.10, parents@1.0.1, console-browserify@1.1.0, vm-browserify@0.0.4, http-browserify@1.7.0, readable-stream@1.1.13, shasum@1.0.1, url@0.10.3, resolve@1.1.6, browser-resolve@1.9.0, labeled-stream-splicer@1.0.2, buffer@3.2.2, glob@4.5.3, jsonstream@0.10.0, deps-sort@1.3.9, syntax-error@1.1.4, browser-pack@4.0.4, crypto-browserify@3.9.14, insert-module-globals@6.5.0, browserify-zlib@0.1.4, module-deps@3.8.1) ├── griddle@0.1.2 (sane@0.8.1, handlebars@2.0.0) ├── gulp-react@3.0.1 (object-assign@2.1.1, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, react-tools@0.13.3) ├── gulp-jshint@1.9.0 (minimatch@1.0.0, through2@0.6.5, lodash@2.4.2, rcloader@0.1.4, jshint@2.8.0) ├── gulp-autoprefixer@1.0.1 (object-assign@1.0.0, through2@0.6.5, vinyl-sourcemaps-apply@0.1.4, autoprefixer-core@3.1.2) ├── babelify@6.0.1 (through@2.3.4, lodash@3.9.3, babel-core@5.5.8) └── gulp-less@1.3.6 (convert-source-map@0.4.1, lodash.defaults@2.4.1, through2@0.5.1, vinyl-sourcemaps-apply@0.1.4, less@1.7.5)
is installed? inside app/main.jsx
have button:
<button bsstyle="success" bssize="small" onclick={somecallback}> </button>
when run npm run build
, get:
/users/i-danielk/ideaprojects/webapi_bootstrap/webapp/app/main.js line 27 col 33 'button' not defined. line 27 col 88 'somecallback' not defined.
any idea doing wrong?
looks install worked. what's causing errors did not require react-bootstrap button
undefined. other error forgot add this
(has onclick={this.somecallback}
somecallback needs in react component.
to import react-browserifies button need add
var button = require('react-bootstrap').button
to app.jsx file
Comments
Post a Comment