Currently, I have a config as shown below. Is the ignoreMTime property placed in the correct place for browserify to read it as a valid option for the transform?

browserify: {
            options: {
                transform: [[gruntReact.browserify, {ignoreMTime: true}], configify, nwjsify],
                browserifyOptions: {
                    debug: true // source mapping
                }
            },
            dev: {
                src: ['asr/*.jsx', 'asr/**/*.jsx', 'asr/**/*.js'],
                dest: 'public/js/compiled/bundle.js',
                options: {
                    watch: true, // use watchify for incremental builds!
                    keepAlive: true // watchify will exit unless task is kept alive
                }
            },
            prod: {
                src: ['asr/*.jsx', 'asr/**/*.jsx', 'asr/**/*.js'],
                dest: 'public/js/compiled/bundle.js'
            }
        },

As the title says. The options parameter just takes the harmony flag for now, but it may take other options in the future. I'm going to open a PR for this.

This code no longer works in [email protected]:

browserify: {
  options: {
    transform: [require('grunt-react').browserify]
  },
 client: {
    src: 'react/main.js',
    dest: 'static/js/bundle.js'
  }
}

It works fine in 0.10 and 0.11. Perhaps a bug in 0128961?

Update: Tested with the latest version of browserify.

I have a situation like this where I want to set up specific destination targets for different types of React Component files in my application:

react: {

  // Components
  components: {
    expand: true,
    cwd: './',
    ext: '.js',
    src: [
      'app/modules/components/**/*.js',
      'app/modules/components/**/*.jsx',
      'bower_components/widget-library/src/components/**/*.js',
      'bower_components/widget-library/src/components/**/*.jsx',
      '!app/modules/components/**/*-test.js',
      '!bower_components/widget-library/src/components/**/*-test.js'
    ],
    dest: 'serve/modules/components'
  },

  // Widgets
  widgets: {
    expand: true,
    cwd: './',
    ext: '.js',
    src: [
      'app/modules/widgets/**/*.js',
      'app/modules/widgets/**/*.jsx',
      'bower_components/widget-library/src/widgets/**/*.js',
      'bower_components/widget-library/src/widgets/**/*.jsx',
      '!app/modules/widgets/**/*-test.js',
      '!bower_components/widget-library/src/widgets/**/*-test.js'
    ],
    dest: 'serve/modules/widgets'
  }
}

What ends up happening, however is the relative pathing for all of these src targets specified are preserved in the dest location's output:

Is there any way to force grunt-react to flatten these out so that no matter where src files are specified (they could be a bower component, npm module or just a commited source file in the project) they are placed in the directory specified by the dest property without their relative pathing (e.g. 'bower_components/etc/etc')?

Split off from #4, hide verbose logging by default and allow clients to opt-in by setting verbose: true

I'll work on a PR for it.

It will show error: "Invariant Violation: React.render(): Invalid component element. This may be caused by unintentionally loading two independent copies of React."

This is more of a question then an issue. I'm new to both Hapi and React but I'm curious why the app.built.js is so large. It looks like grunt is calling browserify on the src/react_components/ directory but the app.built.js has a lot of other stuff in it. Is this common? Is all of the extra stuff just React?

Has grunt-react been tested to work on windows ?

While I have been successfully using it on linux, I recently needed to use it in windows and the jsx files are being copied as it is, without being compiled.

Hi,

I would like to use grunt-react together with grunt-browserify. I've tried to follow your instructions, but the require('grunt-react').browserify always returns null. My Gruntfile.js looks like this.

module.exports = function (grunt) {
    grunt.initConfig({
        browserify: {
            app: {
                files: {
                    "wwwroot/js/app.js": ["Scripts/App.js"]
                },
                options: {
                    transform: [require('grunt-react').browserify]
                }
            }
        },
        browserifyBower: {
            lib: {
                options: {
                    file: "wwwroot/lib.js",
                    checkVersions: false
                }
            }
        },
        bower: {
            install: {
                options: {
                    layout: "byComponent",
                    targetDir: "wwwroot/lib",
                    cleanTargetDir: false
                }
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.loadNpmTasks("grunt-browserify-bower");
    grunt.loadNpmTasks("grunt-bower-task");

    grunt.registerTask("default", [
        "bower:install",
        "browserify"
    ]);
};

Did I miss something?

Thank you!

https://gist.github.com/anonymous/e4d3ffcf8633bdcd19fb

I hope to submit a patch for this after investigation, but I'm not going to get to it tonight.

I just tried to upgrade, and had to revert to the 0.5.x version. I have JavaScript files with names like:
require-0.2.9.1.js, and when the grunt-react 0.6.0 processes that file, it renames it to require-0.js

When a file fails to compile, only line number and nature of error is reported and no information is provided as to which file failed to compile.

I'm using grunt-react v0.10.0 with Browserify and if fails to parse the new JSX way of selectively transferring props using destructuring assignment. Basically adding this line inside my component's render function...

var { checked, ...other } = this.props;

...results in this error:

Error: Parsing file /path/to/my/component/MyComponent.jsx: Line 26: Unexpected token ...

EDIT:
So I assume is to do with not having harmony=true set. How do I enable this when used with Browserify?

I tried to use grunt-react with the 0.5.1 build of react.js. The react team decided that the property className should be used to add the class attribute to elements (instead of just class). Unfortunately grunt-react compiles to class, e.g.

<div class="test"></div>

compiles to

React.DOM.div( {class:"test"});

but it should be

React.DOM.div( {className:"test"});

That might not be a problem in grunt-react but in react-tools. I just wanted to open this issue, in case someone has the same problems while using grunt-react.

Currently the tool uses 0.11 regardless if you have 0.12 installed

Here's my grunt config:

react: {
  options: {
    extension: 'jsx',
    ignoreMTime: false
  },
  apps: {
    files: {
      'public/apps/': ['public/apps/']
    }
  }
}

This would take public/apps/foo/bar.jsx and turn it into public/apps/foo/bar.js. Is there a way I could instead move it into something like public/apps/foo/build/bar.js? I'd like to be able to ignore the built files from jshint, since they fail with my current project's rules.

I don't have a central location where all my React files live, and I'd rather not put grunt rules for ever folder that does (could be dozens).

Hi @ericclemmons,

Would you be able to provide an example project that uses both grunt-react and browserify together?

The README explains the project is deprecated, but the module page on npm doesn't have this info as it wasn't pushed.

Could you push a new version to npm so users there know to use grunt-babel? Thanks!

Hi,
We're a development team using grunt-react (which is awesome!) for compiling JSX to JS. We've recently enabled the file concatenation/combination feature and it works good, but we've got some problems that it seems to combine the files differently for different developers? We're all using version ~0.9.0, and for technical reasons we're still bound to checking in both our JSX and JS files into version control.

After someone has made a change in the JSX file, compiled it into JS, committed and pushed — then someone else pulls down the code, grunt watch detects and recompiles the JS files again — now with different output. Why?

Here's an example from what "git diff" says has changed:

@@ -1134,7 +1134,7 @@ define('components/header__menu', ['react', 'utils', 'components/header__languag
     });

     return MobileMenu;
-});
+});
 /**
  * @jsx React.DOM
  */

As you might've guessed, that place is the end+beginning of 2 different files that are concatenated.

Any chance that you can update your react-tools dependency to the latest version?

I had a problem.

When I try require a component without extension:

var Item = require('./Item');

In the console throws out an error:

Error: Cannot find module './Item' from '/Users/kulakowka/Documents/node.js/geekhub/assets/jsx'

But if I try to require a component with extension:

var Item = require('./Item.jsx');

It works!

Task configuration looks like this:

grunt.config.set('browserify', {
    options:      {
      transform:  [ require('grunt-react').browserify ]
    },
    dev:          {
      src:        'assets/jsx/app.jsx',
      dest:       '.tmp/public/js/app.js'
    }
  });
  grunt.loadNpmTasks('grunt-browserify');

I tried to add the extension option:

grunt.config.set('browserify', {
    options:      {
      transform:  [ require('grunt-react').browserify ],
      extension: 'jsx'
    },
    dev:          {
      src:        'assets/jsx/app.jsx',
      dest:       '.tmp/public/js/app.js'
    }
  });
  grunt.loadNpmTasks('grunt-browserify');

But it did not help.

I would use .jsx extension for files with components. But I am sure that indicate the file extension in the require () is not required. Maybe it's a bug?

Hello! I love using this library and would also love if you could support the New ES11 Optional Chaining and the Numerical Coalescing Operator.

Optional Chaining:

const myObj = {
  foo: {
    bar: "hello"
  }
};
console.log(myObj.foo?.baz);
//This allows me to still use a deeply nested variable in an object without returning undefined.

Numerical Coalescing Operator:

const foo = undefined;
const bar = foo ?? "hey";
//By using the Numerical Coalescing Operator I can return bar as the string if foo is undefined or null