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


Simple browserify test only runs when built with --debug

Question:

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?


Answer:

-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.

This...

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

...is the same as this:

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

Related:


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


javascript,node.js,reactjs,browserify
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...

JSONP Ajax calls not working parallel


javascript,jquery,ajax,node.js,browserify
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:...

How to avoid code duplication using Browserify


javascript,browserify,commonjs
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...

Browserify with Zurb Foundation Framework


jquery,zurb-foundation,gulp,browserify,browserify-shim
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


javascript,browserify,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...

Browserify dynamic seperate bundles


javascript,browserify,commonjs
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...

Cannot find EC2 service using nodejs aws-sdk with browserify


node.js,amazon-web-services,amazon-ec2,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...

Cannot find a submodule imported inside a module installed from npm


node.js,npm,reactjs,browserify,html-datalist
I would like to use a node.js module from https://github.com/asbjornenge/react-datalist 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...

Babelify ParseError on import module from node_modules


javascript,node.js,browserify,ecmascript-6,babeljs
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...

React +(Router) without webpack or browserify


reactjs,browserify,webpack,react-router
Is it possible to use react with ReactRouter, without using browserify or webpack. I am following the documentation from http://rackt.github.io/react-router 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...

Can browserify set global modules?


javascript,backbone.js,marionette,browserify
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...

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


javascript,node.js,svg,browserify
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...

Difference between bower, browserify, requirejs, webpack?


javascript,requirejs,gulp,bower,browserify
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,...

Grunt browserify transform ReactJS then bundle


gruntjs,reactjs,browserify
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...

Update function doesn't work in file in Phaser


jquery,node.js,browserify,phaser-framework
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; window.game = new Phaser.Game((h > w) ? h : w, (h > w)...

creating multiple objects with browserify


javascript,oop,browserify
I am trying to use the design pattern as below: human.js function Human(name){ this.name = name this.sayName = function(){ console.log(this.name); } } 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...

Browserify and Reactify source maps include full local path names


javascript,reactjs,browserify,watchify,reactify
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...

Getting started with browserify: import local files?


javascript,browserify
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...

Browserify transform with reactify


reactjs,gulp,browserify,watchify,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');...

Babelify omit file extension on import


reactjs,browserify,ecmascript-6,babel
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


javascript,browserify
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?...

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


javascript,browserify
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...

Multiple React components in a single module


reactjs,gulp,browserify
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...

Browserify does not resolve external file


javascript,gulp,browserify
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...

Simple browserify test only runs when built with --debug


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...

Browserify errors ending gulp watch task


javascript,node.js,gulp,browserify,gulp-watch
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 () { gulp.watch(config.paths.components, ['browserify']); gulp.watch(config.paths.sassSource, ['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...

Error installing cordova


cordova,npm,browserify,visual-studio-cordova,jsonstream
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!...

browserify 'require' placement


javascript,node.js,backbone.js,browserify
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; } }); ...

how to integrate a lodash custom build into a project


npm,browserify,lodash,package.json
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...

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


javascript,coffeescript,reactjs,browserify
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...

Generate React components in PHP and then render in client


javascript,php,reactjs,browserify
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...

Possible to load SVG files with Browserify


javascript,svg,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...

Watchify pipe output to eslint


javascript,browserify,watchify,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...

Node.js - Browserify: Error on parsing tar file


javascript,node.js,parsing,tar,browserify
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...

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


angularjs,gulp,browserify,hammer.js
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":...

Browserify bundle undefined depency


javascript,backbone.js,browserify,browserify-shim
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"), $...

Not able to access variables in required file


javascript,gulp,require,browserify
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'...

Vue JS 0.12 Dynamic Components


javascript,components,browserify,vue.js
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....

Not able to access json object in Backbone View Handlebars


javascript,json,backbone.js,browserify
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 ' +...

Browserify uglify via node script or command line?


javascript,node.js,gulp,browserify,uglifyjs
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:...

Making Browserify bundle play nice with ReactDevTools


javascript,reactjs,browserify
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...

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


javascript,dependency-management,browserify,webpack,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.

reduce a lot of require() function


javascript,browserify,commonjs
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...

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


browserify,velocity.js
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...

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


javascript,gulp,browserify
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...

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


javascript,jquery,node.js,npm,browserify
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...

How to register a global handlebar helper


backbone.js,handlebars.js,browserify
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...

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


javascript,node.js,browser,browserify
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


zurb-foundation,gulp,browserify
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 | └──...

browserify - exclude code blocks?


javascript,node.js,reactjs,browserify
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...