browserify , Simple browserify test only runs when built with --debug

Simple browserify test only runs when built with --debug


Tag: browserify

I have a simple hello world script main.js:

window.addEventListener('load', function() {
    "use strict";
    document.getElementById('output').textContent = "Hello, browser.";

If I build bundle.js with:

browserify -r ./main.js > bundle.js

It doesn't run in the browser. No errors, just doesn't execute. If I use:

browserify -r --debug ./main.js > bundle.js

It runs fine. Why doesn't the non-debug one run?


-r means require. -> -r file.js means, that you will put it into a seperate scope to require it in an other bundle, but it don't will execute.

Your "solution" -r --debug (or short -r -d) works, because the require attribute has no parameter/file, so it will be ignored by browserify.

Just removing -r --debug should solve your problem.


browserify -r --debug ./main.js -o ./bundle.js the same as this:

browserify -d ./main.js -o ./bundle.js


browserify 'require' placement

Usually all dependencies are required in the head of the file. var Backbone = require('backbone'); var $ = require('jquery'); I wonder if it is correct to require in code body. Example: template: require('./home.tpl.hbs'), module.exports = Backbone.View.extend({ template: require('./home.tpl.hbs'), render: function () { ... return this; } }); ...

Getting started with browserify: import local files?

I have been prototyping a JavaScript application and now I want to move to a more robust setup using browserify and managing dependencies with require. Currently I have the following files in my application: chart.js form.js highcharts-options.js vendor/ highcharts.js jquery.js highcharts-options.js is basically a list of constants, while chart.js looks...

Error installing cordova

After running this command: sudo npm install -g cordova I get this error: npm ERR! notarget No compatible version found: [email protected]'>=1.0.3-0 <2.0.0-0' npm ERR! notarget Valid install targets: npm ERR! notarget ["0.0.0","0.1.0","0.1.1","0.1.2","0.1.3","0.2.0","0.2.1","0.2.2","0.2.3","0.3.0","0.3.1","0.3.2","0.3.3","0.4.0","0.4.1","0.4.2","0.4.3","0.4.4","0.5.0","0.6.0","0.6.1","0.6.2","0.6.3","0.6.4","0.7.0","0.7.1","0.8.0","0.7.2","0.7.3","0.7.4","0.8.1","0.8.2","0.8.3","0.8.4","0.9.0","0.10.0"] npm ERR! notarget npm ERR!...

JSONP Ajax calls not working parallel

I have Node.js server and jQuery ajax requests. This works: api(config.categoriesURL, success, config.err1); setTimeout(function () { api(config.randomURL, success1, config.err2); },300); But this doesn't: api(config.categoriesURL, success, config.err1); api(config.randomURL, success1, config.err2); Here is the console output: url: http://localhost:3000/categories/?callback=myCallback&_=1431726147454 url:...

Why do I have to use vinyl-source-stream with gulp?

I am trying to use gulp and browserify to transform my .jsx files into .js files. var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify'); gulp.task('js', function () { browserify('public/javascripts/src/app.jsx') .transform(reactify) .bundle() .pipe(gulp.dest('public/javascripts/dist')) }); ``` The above threw Arguments to path.resolve must be strings. I managed to...

Watchify pipe output to eslint

Would anyone know how I can pipe output from Watchify to eslint - and have it report linting issues in the CLI while still building the outputted JS ? Watchify states that you can pipe to a command using -o. watchify main.js -o 'uglifyjs -cm > static/bundle.min.js' Eslint says you...

How is it possible that browserify can make server code run in the browser when servers need access to things like sockets?

Am I simply ignorant of the features that some browsers offer or does this library use some strange workaround to implement these features?

Browserify + Gulp + Foundation

I'm creating a boilerplate project for working with the Foundation framework using gulp and browserify with the following file structure while following this handy guide: . ├── build | ├── js | └── bundle.js | ├── stylesheets | ├── main.css | └── main.min.css | └── index.html ├── node_modules | └──...

How to avoid code duplication using Browserify

CommonJS noob here, I read about browserify and thought it was simpler than my existing RequireJS setup, so I went ahead and changed them. What I have found out is I am going to have code duplication in each bundle. Let me explain: Lets say, I have page1.js and page2.js...

Possible to load SVG files with Browserify

Trying to require an svg with the this line: var framea = require('../images/frames/text-frame-one.svg'); … and getting this error when compiling: events.js:85 throw er; // Unhandled 'error' event ^ SyntaxError: Unexpected token The SVG is incredibly simple and shouldn't be the cause of any errors. Is there a way to load...

Making Browserify bundle play nice with ReactDevTools

React 0.13.3 I started using Browserify to organize my frontend React code. I'm also using the React Developer Tools Chrome extension for debugging. However, I'm having trouble with some very simple React code. var React = require('react/addons'); //React DEV-TOOLS requires React to be on the global scope. Scope is hidden...

Cannot find EC2 service using nodejs aws-sdk with browserify

I am using Node.js with browserify and I have setup AWS like this: var AWS = require('aws-sdk'); AWS.config.region = 'us-west-2b'; This works fine. An object is returned when I am printing to console. However, when I do: var ec2 = new AWS.EC2(); console.log(ec2); It is failing to find EC2. I...

How can I access $.velocity.RunSequence when using Velocity.js with Browserify?

My code: var Backbone = require('backbone'); var $ = require('jquery'); Backbone.$ = $; var velocity = require('velocity-animate'); module.exports = function (obj) { var obj = obj || {}; return Backbone.View.extend({ tagName: 'article', className: 'lab-notes__article--single', initialize: function () { var _this = this; _this.collection.deferred.done(function () { var _thePost = _this.collection.first(); _this.model...

how to integrate a lodash custom build into a project

lodash supports custom builds with only a subset of the functionality / size. Creating a custom build is a breeze with lodash-cli. What's the recommended way to take this custom build and integrate it into the project? (using npm / browserify). Do I create a custom build command that creates...

Browserify dynamic seperate bundles

My app loads an object of messages in a given language into the application. My structure is like so: /lang /en.js (100 kb file) /ru.js (100 kb file) /... many more app.js (this is `MyApp` as below) The language files are very big so I would like to create seperate...

Browserify: runtime in browser 'Cannot find module…' error

I'm trying to learn Browserify, and I have a test project where I am bundling two javascript files into one bundle.js and including it on the page. I get this error at runtime in the browser: Uncaught Error: Cannot find module './test1' I use the following command to bundle the...

Update function doesn't work in file in Phaser

I have a game with structure like this (some lines of code were deleted, but all files are required by Browserify): Game needs boot.js and play.js game.js: w = window.innerWidth * window.devicePixelRatio, h = window.innerHeight * window.devicePixelRatio; = new Phaser.Game((h > w) ? h : w, (h > w)...

Multiple React components in a single module

I am new to the whole browserify thing. I have been trying to use browserify + reactify + gulp to transform, minify and combine a React application. As long as I have a single React.createClass with a single module.exports = MyComponent everything works fine. Since I have several shared components...

Gulp throws an error when bundling angular and angular-hammer with browserify

Gulp throws an unclear error when I am trying to bundle angular and angular-hammer (the Ryan Mullins version) with browserify. For a stripped down version of the app, the package.json file is: { "name": "hammer-test", "version": "0.0.0", "description": "", "main": "app/main.js", "devDependencies": { "browserify": "^10.2.1", "browserify-shim": "^3.8.7", "gulp": "^3.8.11", "vinyl-source-stream":...

How can I 'swap' react for react/addons in my application?

I want to use the Perf stuff. It seems that if I do: var React = require('react/addons'); in my own modules then libraries (react-bootstrap, react-router etc.) end up using another copy of plain react and things break. I am using browserify. Is there a fix or another way to do...

Generate React components in PHP and then render in client

I'm trying to use React to simplify the way I build UI for an app I'm writing. I've got a good proof of concept working in a single HTML page, but I need to split out the JS into individual modules to make it easier to maintain. I know how...

Browserify does not resolve external file

I'm trying to use browserify inside gulp. The Gulpfile.js contains the simple task: gulp.task('browserify', function () { var x = browserify('./src/main/js/init.js'); return x.bundle({ ignoreMissing: true }) .pipe(source('init.js')) .pipe(gulp.dest('./dist/js/')); }); Where init.js is: require("d3"); I'm trying to use the alias "d3" which is an external dependency which browserify should not try...

Browserify with Zurb Foundation Framework

I'm trying to figure out how to properly bundle the foundation framework js with browserify. In my project folder, I install it along with jQuery (which it depends on): npm install jquery foundation-sites --save Then in my main.js I have the following: var $ = jQuery = require('jquery'); var foundation...

Make available a library created using browserify and browserify-shim

I want to create a JavaScript library for browser using Browserify / Browserify Shim and make it available within the browser from a global variable. I would want that the exports of the entry JS file would be attached on this variable. For example, in my library, I would have...

Babelify ParseError on import module from node_modules

I'm using ES6 with Babelify and CommonJS module formatter. And I using ES6 style module features with node's module system. So, I'm going to put in all my own modules in node_modules/libs folder. test.js in [ node_modules/libs ] export default function() { console.log('Hello'); }; main.js (will compile to bundle.js) import...

Node.js - Browserify: Error on parsing tar file

I'm trying to download a tar file (non-compressed) over HTTP and piping it's response to the tar-stream parser for further processing. This works perfect when executed on the terminal without any errors. For the same thing to be utilized on browser, a bundle.js file is generated using browserify and is...

Browserify transform with reactify

I am trying to build a project using gulp. Unfortunately I am experiencing some trouble with it. This is what my gulpfile.js looks like: 'use strict'; var watchify = require('watchify'); var browserify = require('browserify'); var gulp = require('gulp'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var gutil = require('gulp-util');...

Browserify uglify via node script or command line?

It seems in many places the professionals are building their projects using a node.js script that involves either gulp or grunt. What I can't figure out though, is why the script method is preferrable? When switching from the command line version to the script version, you add other packages in:...

Does webpack allow to run my app without building like jspm?

I was just wondering about this. Can webpack work in the browser without doing any builds, like JSPM? Or is it the same as browserify? I looked at the official docs and found no mention of this.

Vue JS 0.12 Dynamic Components

I upgraded to Vue 0.12 but it's left me with a tricky problem. I'm using Browserify/Vueify to transpile and concatenate single file component definitions. In my app component I "require" the needed components and assign to keys in the components object then use v-component="x" in the template to mount them....

Babelify omit file extension on import

I am writing a React application with ES6 and JSX. Below is the command I use to browserify my .es6 files into a bundle.js. $ browserify src/es6/app.es6 -t babelify -o build/js/bundle.js When I try to import a component using something like import MenuBar from './menu', I get the error message:...

Browserify: take minified file from node module

I installed bootstrap via npm and i'd like to require it via browserify, so I use: require('bootstrap'); But there are 2 problems here: It takes the non minified version of bootstrap I would also like to include the bootstrap.tpl.min file How can i do it?...

How to register a global handlebar helper

handlebarhelpers.js file var $ = require('jquery'), Handlebars = require('handlebars'), Backbone = require('backbone'); module.exports.ifCondhelper = function (Handlebars, options) { Handlebars.registerHelper('ifequal', function(value1, value2, options) { if(value1 === value2) { return options.fn(this); } return options.inverse(this); }); } Template {{#ifCondhelper.ifequal type ../../notificationMessage.SkuMappingNotAvailableMessageP1}} <li notid="{{id}}"><a...

jquery appears in browserify bundle.js but not working in browser

I'm following this short tutorial on getting started with Browserify Getting Started with Browserify. Despite following everything exactly jquery isn't working on the page when bundled,ie. the button element in my app.js code below is not appended to the body. Have checked everything I can think of using chrome dev...

Not able to access json object in Backbone View Handlebars

Backbone View: var $ = require('jquery'), Handlebars = require('handlebars'), Backbone = require('backbone'), channel = require('../../templates/dashboard/channelstats.html'), channelstatsCollection = require('../../collections/dashboard/ChannelStatsCollection'), mainJs = require('../../libs/main'); var ChannelStatsView = Backbone.View.extend({ el: "#divstatsview", initialize: function () { this.collection = new channelstatsCollection(); var api_token = mainJs.get_api_token(); this.collection.fetch( { headers: {'Authorization': 'Bearer ' +...

creating multiple objects with browserify

I am trying to use the design pattern as below: human.js function Human(name){ = name this.sayName = function(){ console.log(; } } var a = new Human("bob"); var b = new Human("ted"); However I haven't used browserify much and I don't know how to do this in browserify. What I...

Difference between bower, browserify, requirejs, webpack?

I'm used to simple and small JS projects where the JS dependencies are concatenated and minified as part of the build process using something like gulp and the script tag in the html contains the hardcoded path to that minified JS file. It's not elegant and probably has several disadvantages,...

Browserify bundle undefined depency

I'm using browserify in a Backbone project and shimming owlCarousel because it is not a commonJS like module. The shim transformation seems to work but not when I really need it. My app.js file looks like: var settingsView = require("./settingsView.js"); new settingsView(); and my settingsView var app = require("./controllers.js"), $...

Can browserify set global modules?

I'm putting together a Backbone Marionette application with Browserify. When I want to use Backbone or Marionette related functions, the top of each individual module file looks like this: var $ = require('jquery'); var _ = require('underscore'); var Backbone = require('backbone'); Backbone.$ = $; var Marionette = require('backbone.marionette'); Is there...

reduce a lot of require() function

I have a lot of CommonJS modules and I need to add all of them to array. Therefore, I have a huge repeated code: //Container module var module1 = require('module1'), module2 = require('module2'), ... module25 = require('module25') var container = []; container.push(module1); container.push(module2); ... container.push(module25); module.exports = container; Is it...

Browserify errors ending gulp watch task

I've got the following setup in my gulpfile.js: gulp.task('browserify', function() { browserify(config.paths.browserifyEntry) .transform(reactify) .bundle() .pipe(source('master.js')) .pipe(gulp.dest(config.paths.dist)) //.pipe(connect.reload()); }); gulp.task('watch', function () {, ['browserify']);, ['sass']); }); This all works perfectly until I'm writing code that results in a browserify error. This happens frequently as I'm editing code in one...

browserify - exclude code blocks?

I'm building an app with shared React components in the browser and server-side Node. Right now, I'm using Marty.js to do this: function getUser() { if (Marty.isBrowser) { /* Get user using some client method */ } else { /* otherwise, use some secret server code */ } } I'm...

Browserify and Reactify source maps include full local path names

I use watchify/ browserify to create a bundle with debug source maps with this command- watchify main.js -o bundle.js -v -d When I use Chrome DevTools to debug the resulting app, the source files are accessible in their orginal nested folder locations, visible in DevTools' Sources panel. However when I...

Not able to access variables in required file

I'm using browserify on a project and am running in to the following: I have a file test.js. In test.js there is nothing but the following: var test = 'test'; Now, in the same directory I have my main file 'app.js'. I require test.js and try to access the 'test'...

Cannot find a submodule imported inside a module installed from npm

I would like to use a node.js module from using browserify. I did install the module locally at my working directory. In that directory, I created a javascript file, main.jsx var React = require('react'); var ReactDatalist = require('react-datalist'); var options = ['apple','orange','pear','pineapple','melon']; React.render(<ReactDatalist list="fruit" options={options} />, document.body); Then, I...

React +(Router) without webpack or browserify

Is it possible to use react with ReactRouter, without using browserify or webpack. I am following the documentation from they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot. So is it possible to get reactrouter working...

Simple browserify test only runs when built with --debug

I have a simple hello world script main.js: window.addEventListener('load', function() { "use strict"; document.getElementById('output').textContent = "Hello, browser."; }); If I build bundle.js with: browserify -r ./main.js > bundle.js It doesn't run in the browser. No errors, just doesn't execute. If I use: browserify -r --debug ./main.js > bundle.js It runs...

javascript node module.exports / require() code on the front-end

I've been looking into using a library such as SVGO to be able to clean user submitted SVG code on the front end. SVGO is a node.js based library which typically works on the back end, so I've been trying to wrap my head around how to go about sending...

Grunt browserify transform ReactJS then bundle

In my project I am using Grunt to build the javascript files, I have ReactJS components which makes Grunt complain about Error: Parsing file in one of my javascript file, caused by the JSX syntax: "use strict"; var $ = require('jquery'); var React = require('react'); require('app/comments/comment_box_react.js'); $.fn.comment_box = function(options){ var...

require (browserify) not working correctly when assigned (empty object), but works when inline

I have the following component definitions in React (coffee jsx): CompUtils = require './../utils/comp-utils' ... render: -> console.log CompUtils # prints {} (empty object) <div> Then {CompUtils.getConstructComponent @props.construct, @props.onUpdate, @props.onRemove} </div> But this works: render: -> console.log require('./../utils/comp-utils') <div> Then {require('./../utils/comp-utils').getConstructComponent @props.construct, @props.onUpdate, @props.onRemove} </div> I am absolutely confounded by...