FAQ Database Discussion Community


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

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 can I use RxJS-jQuery with browserify's require

jquery,browserify,rxjs
I use jQuery in my app. I bundle all my source files with browserify. Thus, I import the npm version of jQuery: const $ = require('jQuery'); I also use RxJS and like to use the jQuery Bindings for the Reactive Extensions for JavaScript, but if I require('rxjs-jquery') I only get...

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

A bit confused with factor-bundle and grunt-browserify

browserify,grunt-browserify
a bit of a noob question -- I'd like to create two bundles -- app_bundle.js, and landing_bundle.js. They will both share react, and a few other files, so I thought it would be a good idea to extract those out into a different, common bundle. I found factor-bundle, but am...

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

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

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

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

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?

How to avoid long relative paths (../../../) with jasmine in different environments?

node.js,testing,jasmine,karma-runner,browserify
I am currently developing a project, which I want to test in different environments - including node.js and different browsers with karma/selenium - to avoid compatibility issues. (I think I will use browserify in browsers, but I am not familiar with it yet.) I have a nested testing directory, something...

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

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

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.

Js browserify require from array of strings does not working

javascript,browserify
I am trying to loop over array of strings and require them with require and for some reason this is not working. This is working: console.log(require('./siteParts/testis')); This is not: var siteParts = ['testis']; siteParts.forEach(function(part) { console.log(require('./siteParts/' + part)); Error: Cannot find module './siteParts/testis' }); ...

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

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

Generating both browserify output & System.register() modules from ES6 modules?

browserify,ecmascript-6,babeljs,traceur,systemjs
I have coded ES6 modules as per 2ality's final syntax example, without a .js suffix. I have as well organised the modules into a vendor/project directory hierarchy and module naming scheme as System.register() module format effectively places registered modules into the same namespace. The problem is as follows, if I...

Use glob matching, when passing files to browserify in gulp

javascript,coffeescript,gulp,browserify
All the examples I have seen using browserify and gulp assume that you only want to browserify 1 file. This is usually not the case. I came across an example that used vinyl-transforms, but I am unable to get it to work correctly. Here is the (coffee-script) code: # Browserify...

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; } }); ...

Gulp Browserify SourceMaps

gulp,browserify,source-maps
I've looked at this question already and the answer doesn't work in my situation: gulp, browserify, maps? So here is what I have: gulp.task('debug-app-js', function () { console.log('DEBUG-APP-JS'); var src = './node_modules/js/app-main.js', dst = '../www/js', bundler = browserify(src, {debug:true}); return bundler.bundle() .pipe(source('app-build.js')) .pipe(gulp.dest(dst)) }); Debug is set to true, so...

Getting Karma, 6to5ify and Istanbul to play ball

code-coverage,karma-runner,browserify,ecmascript-6,karma-coverage
I have Browserify, 6to5ify and Karma to play nice, successfully running my specs. When I add code coverage however, things go south. I've tried several approaches: Add browserify-istanbul transform to my karma.conf.js. However, this results in it trying to run instrumentation on my spec-files as well it would appear. Run...

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

Using Browserify to Import Smooth Scroll

javascript,node.js,npm,browserify
I'm not sure if I'm understanding Browserify correctly, but am I able to essentially require() this smooth-scroll plugin (installed via npm) in my app.js file and Browserify will bundle it all together in my final app.js file? app.js var ss = require('./smooth-scroll'); $(document).ready(function(){ ss.init(); }); gulpfile.js gulp.task('js', function () {...

Browserify paths and Webstorm configuration

javascript,npm,webstorm,browserify
I build my project with gulp and use browserify. To make path resolution easier i configurated browserify var b = browserify('./app', {paths: ['./node_modules','./src/js']}); The problem is that WebStorm IDE don't know about this and doesn't help me with intellisense when i require files. For example intellisense does't work on the...

What the meaning of browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js

npm,browserify,uglifyjs
I saw this in flux chat examplethe. browserify . -t [envify --NODE_ENV production] | uglifyjs -cm > js/bundle.min.js Why is browserify . -t [envify --NODE_ENV production] used here? How is the . used? Why is [envify --NODE_ENV production] used after -t? ...

require on client side (node module gives a dep error)

javascript,jquery,node.js,browserify,i18next
I'm trying to use browserify to bundle my js into a file and be able to use require on the client side. But everytime I run browserify or watch on my app.js I get an error from i18next module. Error: Cannot find module 'jquery' from '/home/js/testapp/node_modules/i18next/lib/dep' I've checked i18next and...

Using Browserify with a revision manifest in Gulp, getting “Error: write after end”

gulp,browser-cache,browserify,react-jsx
I'm trying to compile a React app, append a hash to the output filename and produce a revision manifest, so that I can tell the browser to cache it forever. The problem is that the dozen or so tools involved don't all work together perfectly, at least as far as...

What is wrong with my Browserify JavaScript code?

javascript,browserify
In my main.js, I have: var example = require('./test'); example.speak('Hello world'); While in my test.js, I have: module.exports = function() { this.speak = function(str) { str += ' < you typed.'; return str; }; this.listen = function(str) { return str; }; }; What exactly am I doing wrong so that...

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

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

Load HTML Template for use with knockout component via Browserify

javascript,knockout.js,browserify
I'm using browserify and knockout and am trying to load html files for knockout component templates. I have browserify successfully loading javascript files, but I'm unclear on how to get it to load html files. I'm trying to do something like this: (function() { var ko = require('./lib/knockout/dist/knockout.js'); var authenticationViewModel...

Is bundling (webpack/browserify) faster than going through a CDN?

jquery,browserify,webpack
I was just curious if anyone had done any research into this matter. At my place of work we have React, Bluebird, jQuery, and Lodash in every single one of our projects/bundles. We use webpack to bundle all of these dependencies, but I'm not sure if it is actually worth...

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

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

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

How to run Gulp-tasks in the particular order

javascript,node.js,build,gulp,browserify
I am using runsequence plugin. But It seems that I am doing something wrong so it is not working. I am trying to create browserify build and concat it with my handlebars precompiled templates on server using run-sequence gulp plugin. In gulpfile correspoding tasks looks like this: gulp.task("browserify", function ()...

ES6 - how to test Jasime tests thru karma using ES6 like 'import' statement

jasmine,karma-runner,browserify,traceur,gulp-karma
I am new to javascript, trying to write a spec having an ES6 like import statement and then execute it thru Karma with pre-processors as traceur and browserify (to bundle and provide 'require' method). It continues to give me an error of invalid syntax and on looking at the specs...

browserify with noparse=true - how it works

browserify
I would like to ask what is the purpose of using browserify with noparse option set to true (or how browserify works). For instance: if browserify does not parse files at all, does it means that it will not find require statements? if it does not find require statements, then...

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

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

Receiving 'Error: Cannot find module' using browserify, gulp, react.js

javascript,node.js,gulp,reactjs,browserify
So I've been playing around with React.js, gulp and browserify. Everything works great until I try to require a module in my main.js file. I am requiring components/modules in other files with no problem (see below), but when I try to require one in my main.js file, I receive the...

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

Gulp angular unit testing directive templateUrl

angularjs,unit-testing,angularjs-directive,gulp,browserify
I read many post on internet and SO but couldn't find any solution that works I am trying to write unit test for a directive and want the html files to be served from template cache I am using Gulp as a build tool The gulp task for test looks...

Unexpected reserved word error using Jest

jasmine,browserify,jestjs
I'm trying to add Jest tests to my project (using React, Browserify and Babel), but I'm getting an error while doing the most basic thing: With this structure: |- /app |- /scripts |- /models |- Vendor.js |- /__tests__ |- Vendor-test.js And this code: Vendor.js: class Vendor { constructor(json) { this.id...

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

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

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

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

Does Flux always have to use browserify?

reactjs,browserify,reactjs-flux,flux
I've read theoretical overviews of the flux application architecture. I know flux and react go hand in hand, but all the getting started tutorials use browserify right away. What does browserify provide to react? Why is browserify necessary for react/flux to work?

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

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

What is the difference between browserify/requirejs modules and ES6 modules

javascript,module,requirejs,browserify,ecmascript-6
I'm still new to ES6 and module loaders and I'm currently looking at combining a browserify setup with ES6. I was wondering if I would still need browserify/requirejs if I'm using ES6 modules. Seems like both allow you to define modules and export them? What is the difference between browserify/requirejs...

ES6 project does not compile because modules not found

gulp,browserify,ecmascript-6
I'm trying to compile my ES6 classes into something that will work in the browser. Unfortunately, when I run gulp I get the following error Error: Cannot find module 'IDB' from 'my-project/src' So, just to get an idea of the project structure my-project/ gulpfile.js src/ app.js IDB.js Thats it. The...

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

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

Transforming multiple JSX files

javascript,gruntjs,reactjs,browserify
Is there a way to specify multiple source -> destination mappings when transforming jsx files to js files using browserify in grunt? I have the following in Gruntfile.js that supports a single file transformation, but I was hoping to be able to specify a second mapping for another file. I...

Require jsx files without specifying extension

javascript,reactjs,browserify,jsx
I am using browserify and watchify, and would like to require() files other than the default extensions .js and .json without specifying the extension, for instance: // Not ideal (tedious) var Carousel = require('./components/Carousel/Carousel.jsx') // Ideal var Carousel = require('./components/Carousel/Carousel') I have tried --extension=EXTENSION as specified in the browserify documentation:...

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

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

require is not defined error with browserify

javascript,node.js,browserify
I'm new to browserify and trying to load npm modules in browser but I'm getting the following error: Uncaught ReferenceError: require is not defined I'm following the tutorial from http://browserify.org/. Created javascript file with the following content: var unique = require('uniq'); then run npm install uniq and browserify main.js -o...

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

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

Chain Gulp glob to browserify transform

javascript,gulp,glob,browserify
I have a project with a few relatively disjoint pages, each including their own entry point script. These scripts require a number of others using commonjs syntax, and need to be transformed by 6to5 and bundled by browserify. I would like to set up a gulp task that captures all...

Would bower only be useful for css if using browserify and node.js commonJs

node.js,bower,browserify,commonjs
I see from this stack overflow question the difference between bower and npm: npm is used for managing Node.js modules, but can work on the front-end too when combined with Browserify or WebPack. npm does nested dependency tree, so your dependencies can have their own dependencies which can have their...

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

Mongoose has no connect method when loading via Browserify

javascript,node.js,mongoose,browserify
I am able to load Mongoose in an interactive node session and view its connect method like so... > var mongoose = require("mongoose/"); > mongoose.connect [Function] ...But when loading Mongoose via Browserify, the method is missing. The following code... var mongoose = require("mongoose/"); console.log(mongoose); ...logs the following in Chrome: Object...

browserify watchify produces errors

node.js,gulp,browserify,node-request
I am using gulp, browserify and watchify. Here is my 'scripts' task: gulp.task('scripts', function() { var b = watchify(browserify(paths.app.root + '/client.js', watchify.args)); b.on('update', bundle); return bundle(); function bundle() { return b .bundle() .pipe(source('bundle.js')) .pipe(gulp.dest(paths.build.root + '/scripts')); } }); client.js looks like: require('request'); alert('1'); where request is node module (http client):...

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

Grunt-Browserify Ignore Option

javascript,reactjs,browserify,grunt-browserify
I have a React app that I am transforming, uglifying and browserfying via Grunt. My grunt file looks like this... module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), browserify: { dist: { files: { './Scripts/build/App.js': ['./Scripts/src/**/*.js'] }, options: { browserifyOptions: { debug: true }, transform: [ require('grunt-react').browserify ], ignore: './Scripts/src/**/*-test.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...

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

Access function from require()'d file

javascript,node.js,npm,browserify
Following is a code sample: test.js: function print(t){ console.log(t); } index.js: var test = require('./test.js'); test.print("ok"); I get a test.show is not a function error, and I'm not sure why it won't work if with other npm modules seem to work. I am using browserify to make the require work...

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

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

Drupal 8 jQuery conflict

javascript,jquery,drupal,browserify,shim
On the front end part of my Drupal 8 project, I have several javascript modules linked together using Browserify (and gulp). In several modules I use Foundation, and the way Foundation is made is that it adds a foundation() function to the $ object. This is an excerpt of my...

Grunt build setting correct path for bootstrap icons

gruntjs,yeoman,browserify,compass
So i have been trying to build a webapp at work using yeoman, grunt, browserify and sass bootstrap(with compass). I have issues with the finished dist CSS not pointing to the right path, so my glyph-icons are not showing. This is the error i'm getting: http://localhost:9000/styles/.tmp/bower_components/sass-bootstrap/fonts/glyphicons-halflings-regular.woff Failed to load resource:...

Chain promises with then()

javascript,promise,browserify,when-js
I'm using the when promise library to lift() my node style callbacks and promisify them... var nodefn = require('when/node'); var one = nodefn.lift(oneFn), two = nodefn.lift(twoFn), three = nodefn.lift(threeFn); function oneFn(callback){ console.log('one'); callback(null); } function twoFn(callback){ console.log('two'); callback(null); } function threeFn(callback){ console.log('three'); callback(null); } I want to call the functions...

browserify an angular app into one js bundle is good practice?

angularjs,browserify
I'm currently building an angular app with browserify ends up everything is in a bundle js file including angular.js itself and other vendor libs. I am wondering is it a common practice for using browserify or I'm doing something wrong here?

Browserify throws an error with my JSON

json,node.js,gruntjs,browserify
Could anyone tell me why Browserify might not like this code? { "months":[ { "name":"January", "value":0, "days":31 }, { "name":"February", "value":1, "days":28 }, { "name":"March", "value":2, "days":31 }, { "name":"April", "value":3, "days":30 }, { "name":"May", "value":4, "days":31 }, { "name":"June", "value":5, "days":30 }, { "name":"July", "value":6, "days":31 }, { "name":"August",...

browserify + chrome extension's getBackgroundPage()

javascript,google-chrome,google-chrome-extension,browserify
I'm using browserify to manage a Chrome extension, and while in general it appears to work well, there's a problem that comes with browserify embedding the library code in some wrappers. In particular, when accessing chrome.extensions.getBackgroundPage() from a Chrome extension plugin as described, e.g., here, not all (none?) of the...

Typescript and Browserify - Uncaught TypeError: Cannot read property 'step' of undefined

javascript,typescript,browserify,uncaught-typeerror
I have a project right now that basically compiles several typescript files as modules to javascript using commonjs. Then I browserify the entry file which in turn also includes all its modules to a bundle as per the norm. Well this has been going A-OK until I finally started making...

Why can I not use a variable as parameter in the require() function of node.js (browserify)?

javascript,node.js,reactjs,browserify
I tried something like: var path = '../right/here'; var module = require(path); but it can't find the module anymore this way, while: var module = require('../right/here'); works like a charm. Would like to load modules with a generated list of strings, but I can't wrap my head around this problem...

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

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

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

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

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

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');...

Headless Browserify JavaScript Testing with Phantom.js

javascript,testing,phantomjs,browserify,headless-browser
I'm trying to find a way to execute the following steps. Write Node.js code for the browser Compile the code with browserify Test the browser code in the terminal I would love to get the console.logs that the browser receives, but within the terminal. This would not only save me...

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"), $...

Prevent browserify from including module's dependencies

javascript,node.js,gulp,browserify
I'd like to use my NodeJS module in the browser - so I'm using browserify to process it. Now, how can I stop browserify from including the module's dependencies in the bundle file? In this case the dependency is lodash and I'll be loading it separately in the index.html. Here's...

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

NPM unable to install browserify globally

linux,node.js,centos,npm,browserify
I'm unable to install Browserify (or anything) globally. I'm able to install things non-globally without issue. background: I'm running CentOS 6.6 on a corporate network behind a proxy. I installed Node.js using "yum" as root. $ sudo yum -y install nodejs and npm (which wasn't installed with nodejs for some...

Removing process.env.NODE_ENV with browserify/envify?

javascript,node.js,reactjs,browserify
So I am using ReactJS through NPM and Browserify however I am trying to figure out how to build it in production mode like the readme says but it does not seems to be working. I have this code to setup the browserify: var browserify = require('browserify'); var envify =...

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