I am developing a site on React and I am trying to create a bundle using browserify throuhg gulp
This is my gulpfile :
var sourcemaps = require('gulp-sourcemaps'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var browserify = require('browserify'); var watchify = require('watchify'); var reactify = require('reactify'); var babel = require('babelify'); var gulp = require('gulp'); var util = require("gulp-util"); var log = util.log; var path = require('path'); function compile(watch) { var bundler = watchify(browserify('./app.js', { debug: true })); function rebundle() { bundler.bundle() .on('error', function(err) { console.error(err); this.emit('end'); }) .pipe(source('bundle.js')) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('./dist/js')); } if (watch) { bundler.on('update', function() { console.log('-> bundling...'); rebundle(); }); } rebundle(); } function watch() { return compile(true); } gulp.task('build', function() { return compile(); }); gulp.task('watch', ['sass:watch'], function() { return watch(); }); gulp.task('default', ['watch']);
It is responsible for the assembly and generates bundle . But after that, when I import to the site, I get an error message:
ReferenceError: definition not defined
I think browserify , or is the generated bundle expecting some other package that has a definition? What am I missing?
Here is my package.json:
{ "name": "react-test", "version": "0.0.1", "license": "", "browserify": { "transform": [ "babelify" ] }, "dependencies": { "react": "^0.14.3", "react-dom": "^0.14.3", "react-redux": "^4.4.0", "redux": "^3.3.1", "redux-happy-async": "0.0.4", "redux-thunk": "^1.0.3", "rest": "^1.3.1" }, "devDependencies": { "babel": "^6.5.2", "babel-cli": "^6.5.1", "babel-core": "^5.8.25", "babel-loader": "^5.3.2", "babelify": "^6.1.2", "browserify": "^13.0.0", "gulp": "^3.9.1", "gulp-cssnano": "^2.1.1", "gulp-sass": "^2.2.0", "gulp-sourcemaps": "^1.6.0", "gulp-util": "^3.0.7", "jasmine": "^2.4.1", "jasmine-core": "^2.4.1", "karma": "^0.13.21", "karma-jasmine": "^0.3.7", "karma-phantomjs-launcher": "^1.0.0", "karma-webpack": "^1.7.0", "phantomjs-prebuilt": "^2.1.4", "reactify": "^1.1.1", "vinyl-buffer": "^1.0.0", "vinyl-source-stream": "^1.1.0", "watchify": "^3.7.0", "webpack": "^1.12.2", "webpack-stream": "^3.1.0" } }