Using **Vue (^2.0.0-rc.6)** + Browserify, entry point is index.js:

    import Vue from &#39;vue&#39;
    import App from &#39;./containers/App.vue&#39;
    
    new Vue({ // eslint-disable-line no-new
      el: &#39;#root&#39;,
      render: (h) =&gt; h(App)
    })

App.vue:

    &lt;template&gt;
      &lt;div id=&quot;root&quot;&gt;
        &lt;hello&gt;&lt;/hello&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    import Hello from &#39;../components/Hello.vue&#39;
    export default {
      components: {
        Hello
      }
    }
    &lt;/script&gt;
    
    &lt;style&gt;
    body {
      font-family: Helvetica, sans-serif;
    }
    &lt;/style&gt;

Hello.vue:

    &lt;template&gt;
      &lt;div class=&quot;hello&quot;&gt;
        &lt;h1&gt;\{{ msg }}&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
    export default {
      data () {
        return {
          msg: &#39;Hello Vue!&#39;
        }
      }
    }
    &lt;/script&gt;

Blank white screen, did I miss something?

EDIT:

The entry html is just `&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;`, no errors on console logs, and I&#39;m pretty sure Hello.vue is loaded since `console.log(&#39;test&#39;)` that file appears on console.

EDIT 2:

Found the error:

&gt; [Vue warn]: You are using the runtime-only build of Vue where the
&gt; template option is not available. Either pre-compile the templates
&gt; into render functions, or use the compiler-included build. (found in
&gt; anonymous component - use the &quot;name&quot; option for better debugging
&gt; messages.)

Does this mean I have to use webpack solution? Cannot use standard HTML?

**SOLUTION**:
Import Vue from &#39;vue/dist/vue.js&#39;

Vue JS 2.0 not rendering anything?

I&#39;m using the latest version of `react-router` (version ^3.0.0).

I wrote the following routing using ES5:

`routes.js`:

    var React = require(&quot;react&quot;);
    var Router = require(&quot;react-router&quot;);
    var AuthorPage = require(&#39;./components/authors/authorPage&#39;)
    var App = require(&#39;./components/app&#39;)
    var Route = Router.Route;
    
    var routes = (
    	&lt;Route path=&quot;/&quot; component={App}&gt;
    	    &lt;Route path=&quot;authors&quot; component={AuthorPage}/&gt;
    	 &lt;/Route&gt;
    );
    									 
    module.exports = routes;


In another JS file called `main.js` I perform the following call:

`main.js`:

    var React= require(&quot;react&quot;);
    var ReactDom = require(&quot;react-dom&quot;);
    var Router = require(&#39;react-router&#39;).Router;
    var routes = require(&#39;./routes&#39;);
    ReactDom.render(&lt;Router routes={routes}&gt;&lt;/Router&gt;, document.getElementById(&#39;app&#39;));

When I run the code I get the following exception in Google Chrome developer tools:

&gt; Uncaught TypeError: Cannot read property &#39;getCurrentLocation&#39; of
&gt; undefined

Why is that? What am I missing?

React-Router - Uncaught TypeError: Cannot read property &#39;getCurrentLocation&#39; of undefined

I&#39;m writing a new app using (JavaScript) `ES6` syntax through `babel` transpiler and the `preset-es2015` plugins, as well as `semantic-ui` for the style. 

### index.js

    import * as stylesheet from &#39;../assets/styles/app.scss&#39;;
    import * as jquery2 from &#39;../dist/scripts/jquery.min&#39;;
    import * as jquery3 from &#39;../node_modules/jquery/dist/jquery.min&#39;;
    
    console.log($(&#39;my-app&#39;));

### index.html

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;fr&quot;&gt;
    &lt;head&gt;
    &lt;body&gt;
    &lt;script src=&quot;dist/app.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

### Project structure

    .
    ├── app/
    │   ├── index.js
    ├── assets/
    ├── dist/
    │   ├── scripts/
    │   │   ├── jquery.min.js
    ├── index.html
    ├── node_modules/
    │   ├── jquery/
    │   │   ├── dist/
    │   │   │   ├── jquery.min.js
    ├── package.json
    └── tests/

### package.json

      …
      &quot;scripts&quot;: {
        &quot;build:app&quot;: &quot;browserify -e ./app/index.js -o ./dist/app.js&quot;,
        &quot;copy:jquery&quot;: &quot;cpy &#39;node_modules/jquery/dist/jquery.min.js&#39; ./dist/scripts/&quot;,
        …
      },
      &quot;devDependencies&quot;: {
        &quot;babel-core&quot;: &quot;6.3.x&quot;,
        &quot;babel-preset-es2015&quot;: &quot;6.3.x&quot;,
        &quot;babelify&quot;: &quot;7.2.x&quot;,
        &quot;cpy&quot;: &quot;3.4.x&quot;,
        &quot;npm-run-all&quot;: &quot;1.4.x&quot;,
        &quot;sassify&quot;: &quot;0.9.x&quot;,
        &quot;semantic-ui&quot;: &quot;2.1.x&quot;,
        …
      },
      &quot;browserify&quot;: {
        &quot;transform&quot;: [
          [ &quot;babelify&quot;, { &quot;presets&quot;: [ &quot;es2015&quot;]}],
          [ &quot;sassify&quot;, { &quot;auto-inject&quot;: true}]
        ]
      }

### Question 

Using classic `&lt;script&gt;` tag to import `jquery` works fine, but I&#39;m trying to use the ES6 syntax.

* How do I import `jquery` to satisfy `semantic-ui` using ES6 import syntax?
* Should I import from the `node_modules/` directory or my `dist/` (where I copy everything)?

How to import jquery using ES6 syntax?

I am a bit new to the task runner and bundler world and while going through things like 

&gt; Grunt, Gulp, Webpack, Browserify

, I did not feel that there is much difference between them. In other words, I feel Webpack can do everything that a task runner does. But still I got a huge examples where gulp and webpack are used together. I couldn&#39;t figure out the reason why.

Being new to this, I might be taking things in the wrong direction. It will be great if you could point out what I am missing. Any useful links are welcome.

Thanks in advance.

Task Runners (Gulp, Grunt, etc) and Bundlers (Webpack, Browserify). Why use together?

I tried to uglify output of Browserify in Gulp, but it doesn&#39;t work. 

**gulpfile.js**

	var browserify = require(&#39;browserify&#39;);
	var gulp = require(&#39;gulp&#39;);
    var uglify = require(&#39;gulp-uglify&#39;);
	var source = require(&#39;vinyl-source-stream&#39;);
	 
	gulp.task(&#39;browserify&#39;, function() {
	    return browserify(&#39;./source/scripts/app.js&#39;)
	        .bundle()
	        .pipe(source(&#39;bundle.js&#39;))
            .pipe(uglify()) // ???
	        .pipe(gulp.dest(&#39;./build/scripts&#39;));
	});

As I understand I cannot make it in steps as below. Do I need to make in one pipe to preserve the sequence?

	gulp.task(&#39;browserify&#39;, function() {
	    return browserify(&#39;./source/scripts/app.js&#39;)
	        .bundle()
	        .pipe(source(&#39;bundle.js&#39;))
            .pipe(uglify()) // ???
	        .pipe(gulp.dest(&#39;./source/scripts&#39;));
	});
    
	gulp.task(&#39;scripts&#39;, function() {
	    return grunt.src(&#39;./source/scripts/budle.js&#39;)
	        .pipe(uglify())
	        .pipe(gulp.dest(&#39;./build/scripts&#39;));
	});

    gulp.task(&#39;default&#39;, function(){
        gulp.start(&#39;browserify&#39;, &#39;scripts&#39;);
    });


How to uglify output with Browserify in Gulp?

I am new to nodejs and browserify. I started with this [link][1] .

I have file main.js which contains this code

    var unique = require(&#39;uniq&#39;);
    
    var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
    
    this.LogData =function(){
    console.log(unique(data));
    };

Now I Install the uniq module with npm:

     npm install uniq

Then I bundle up all the required modules starting at main.js into a single file called bundle.js with the browserify command: 

    browserify main.js -o bundle.js


The generated file looks like this:

    (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==&quot;function&quot;&amp;&amp;require;if(!u&amp;&amp;a)return a(o,!0);if(i)return i(o,!0);throw new Error(&quot;Cannot find module &#39;&quot;+o+&quot;&#39;&quot;)}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require==&quot;function&quot;&amp;&amp;require;for(var o=0;o&lt;r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
    var unique = require(&#39;uniq&#39;);
    
    var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
    
    this.LogData =function(){
    console.log(unique(data));
    };
    
    },{&quot;uniq&quot;:2}],2:[function(require,module,exports){
    &quot;use strict&quot;
    
    function unique_pred(list, compare) {
      var ptr = 1
        , len = list.length
        , a=list[0], b=list[0]
      for(var i=1; i&lt;len; ++i) {
        b = a
        a = list[i]
        if(compare(a, b)) {
          if(i === ptr) {
            ptr++
            continue
          }
          list[ptr++] = a
        }
      }
      list.length = ptr
      return list
    }
    
    function unique_eq(list) {
      var ptr = 1
        , len = list.length
        , a=list[0], b = list[0]
      for(var i=1; i&lt;len; ++i, b=a) {
        b = a
        a = list[i]
        if(a !== b) {
          if(i === ptr) {
            ptr++
            continue
          }
          list[ptr++] = a
        }
      }
      list.length = ptr
      return list
    }
    
    function unique(list, compare, sorted) {
      if(list.length === 0) {
        return []
      }
      if(compare) {
        if(!sorted) {
          list.sort(compare)
        }
        return unique_pred(list, compare)
      }
      if(!sorted) {
        list.sort()
      }
      return unique_eq(list)
    }
    
    module.exports = unique
    },{}]},{},[1])

**After including bundle.js file into my index.htm page, how do I call logData function ??**


  [1]: http://browserify.org/



Browserify - How to call function bundled in a file generated through browserify in browser

Just started to use [browserify][1], but I cannot find documentation for how to get it spilling out minified output.

So I am looking something like:

    $&gt; browserify main.js &gt; bundle.js --minified


  [1]: https://github.com/substack/node-browserify

How to get minified output with browserify?

I have been developing a site using babel-node and browserify with the babelify transform, to support ES6 syntax.

&lt;b&gt;I am just wondering, can I run this in production as&lt;/b&gt; `babel-node server` &lt;b&gt;rather than&lt;/b&gt; `node server` &lt;b&gt; What other options do I have to run ES6 in node?&lt;/b&gt;

Here are the commands I am running for build and start in development

    // npm run build
    browserify -t [babelify] client.js &gt; public/js/bundle.js&quot;,
    
    // npm start
    babel-node server.js&quot;

Here are my dev dependencies

    &quot;babel&quot;: &quot;^4.0.1&quot;,
    &quot;babelify&quot;: &quot;^5.0.3&quot;,
    &quot;browserify&quot;: &quot;^8.0.3&quot;

Is it okay to use babel-node in production

I installed node js and npm via apt-get install and all of the dependencies, then I installed browserify 

    npm install browserify -g

it goes through the process and it seems like it installed correctly, but when I try to do a simple bundle per this [walkthrough][1]


I get the error:

 /usr/bin/env: node: No such file or directory 

![enter image description here][2]


  [1]: http://blakeembrey.com/articles/introduction-to-browserify/
  [2]: http://i.stack.imgur.com/XsFs9.png

browserify error /usr/bin/env: node: No such file or directory

After upgrading to version `0.14.2`, I see an error and recommendation to use [`ReactDOM.render()`][1] instead of `React.render()`, but whence do I import it?

When I don&#39;t import it and just running as it is, it shows it as `undefined`. Is it a built-in functionality or is it a 3rd party library?


  [1]: https://facebook.github.io/react/docs/top-level-api.html#reactdom

Where should ReactDOM be imported from?

I&#39;m trying to get my Browserify/Babelify/Gulp working in my project, but it won&#39;t take the spread operator. 

I got this error from my gulpfile:

    [SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js]

This is my gulpfile.js

    var gulp = require(&#39;gulp&#39;);
    var source = require(&#39;vinyl-source-stream&#39;);
    var browserify = require(&#39;browserify&#39;);
    var sourcemaps = require(&#39;gulp-sourcemaps&#39;);
    var uglify = require(&#39;gulp-uglify&#39;);
    var buffer = require(&#39;vinyl-buffer&#39;);
    var babelify = require(&#39;babelify&#39;);
    
    gulp.task(&#39;build&#39;, function () {
      return browserify({entries: &#39;./src/client/app.js&#39;, extensions: [&#39;.js&#39;], debug: true})
        .transform(babelify, {presets: [&#39;es2015&#39;, &#39;react&#39;]})
        .bundle()
        .on(&#39;error&#39;, function (err) {
          console.error(err);
          this.emit(&#39;end&#39;);
        })
        .pipe(source(&#39;app.min.js&#39;))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .pipe(sourcemaps.write(&#39;./&#39;))
        .pipe(gulp.dest(&#39;./public/js&#39;));
    });
    
    gulp.task(&#39;default&#39;, [&#39;build&#39;]);

I tried to create a .babelrc file, but it do the same thing. And my script works when i delete the spread operator.

This is the file where the Unexpected token occurs (quite simple).

    import utils from &#39;../utils/consts&#39;;
    
    const initialState = {
      itemList: [
        {name: &#39;Apple&#39;, type: &#39;Fruit&#39;},
        {name: &#39;Beef&#39;, type: &#39;Meat&#39;}
      ]
    };
    
    export function groceryList(state = initialState, action = {}) {
    
      switch(action.type) {
    
        case utils.ACTIONS.ITEM_SUBMIT:
          return {
            ...state,
            itemList: [
              ...state.itemList,
              {name: action.name, type: action.itemType}
            ]
          };
    
        default:
          return state;
    
      }
    }

I don&#39;t know what doesn&#39;t work in this, i read some issues on Github and the setup page on Babel website, but i can&#39;t make it work correctly. 

Can anyone show me how to handle this correctly? Thank you

Browserify, Babel 6, Gulp - Unexpected token on spread operator

Consider the following two files:

`app.js`

    import Game       from &#39;./game/game&#39;;
    import React      from &#39;react&#39;;
    import ReactDOM   from &#39;react-dom&#39;;
    
    export default (absPath) =&gt; {
      let gameElement = document.getElementById(&quot;container&quot;);
    
      if (gameElement !== null) {
          ReactDOM.render(
              &lt;Game mainPath={absPath} /&gt;,
              gameElement
          );
      }
    }

`index.js`

    import App from &#39;./src/app&#39;;

The `gulpfile.js`

    var gulp        = require(&#39;gulp&#39;);
    var source      = require(&#39;vinyl-source-stream&#39;);
    var browserify  = require(&#39;browserify&#39;);
    var babelify    = require(&quot;babelify&quot;);
    var watch       = require(&#39;gulp-watch&#39;);
    
    gulp.task(&#39;make:game&#39;, function(){
      return browserify({
        entries: [
          &#39;index.js&#39;
        ]
      })
      .transform(&#39;babelify&#39;)
      .bundle()
      .pipe(source(&#39;index.js&#39;))
      .pipe(gulp.dest(&#39;app/&#39;));
    });

The error:

    gulp make:game
    [13:09:48] Using gulpfile ~/Documents/ice-cream/gulpfile.js
    [13:09:48] Starting &#39;make:game&#39;...
    
    events.js:154
          throw er; // Unhandled &#39;error&#39; event
          ^
    SyntaxError: &#39;import&#39; and &#39;export&#39; may appear only with &#39;sourceType: module&#39;

**What is this error? What am I doing wrong?**

SyntaxError: &#39;import&#39; and &#39;export&#39; may appear only with &#39;sourceType: module&#39; - Gulp

&lt;!-- language: lang-js --&gt;

    const gulp = require(&#39;gulp&#39;);
    const $ = require(&#39;gulp-load-plugins&#39;)();
    const source = require(&#39;vinyl-source-stream&#39;);
    const browserify = require(&#39;browserify&#39;);
    
    gulp.task(&#39;build&#39;, () =&gt;
      browserify(&#39;./src/app.js&#39;).bundle()
        .pipe(source(&#39;app.js&#39;))
        .pipe(gulp.dest(&#39;./build&#39;))       // OK. app.js is saved.
        .pipe($.rename(&#39;app.min.js&#39;))
        .pipe($.streamify($.uglify())
        .pipe(gulp.dest(&#39;./build&#39;))       // Fail. app.min.js is not saved.
    );

Piping to multiple destinations when file.contents is a stream is not currently supported. What is a workaround for this problem?

How to save a stream into multiple destinations with Gulp.js?

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

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

For example could I do:

    import React from &#39;react&#39;;
    import PanelA from &#39;./panelA.jsx&#39;;
    import PanelB from &#39;./panelB.jsx&#39;;
    
    React.render( 
      &lt;PanelA /&gt;
      &lt;PanelB /&gt;, 
      document.body  
    );

where React would render:

    body
       PanelA
       PanelB



Currently I&#39;m getting the error:

    Adjacent JSX elements must be wrapped in an enclosing tag

while transpiling with browserify and babelify

Is there a way to render multiple React components in the React.render() function?

I am trying to use gulp and browserify to transform my `.jsx` files into `.js` files.

    var gulp = require(&#39;gulp&#39;);
    var browserify = require(&#39;browserify&#39;);
    var reactify = require(&#39;reactify&#39;);

    gulp.task(&#39;js&#39;, function () {
      browserify(&#39;public/javascripts/src/app.jsx&#39;)
        .transform(reactify)
        .bundle()
        .pipe(gulp.dest(&#39;public/javascripts/dist&#39;))
    });

```

The above threw `Arguments to path.resolve must be strings`. I managed to get around it by using `vinyl-source-stream`

    var source = require(&#39;vinyl-source-stream&#39;);
    ...
    .bundle()
    .source(&#39;app.js&#39;)
    ...

Why does this work? I am fairly new to nodejs and gulp. After reading the README of the project and the source code, I am still confused. Any help?

All Browserify Solutions on Gang of Coders

Total of 16 Browserify Solutions