Error when trying babelify of a react application which has another react component as node module

Question

I am trying to setup a react based component library using browserify. This is importing other react based component library as a node module. Following is the browserify configuration in grunt-browserify.

{
      options: {
        "transform": [
          [
            "babelify",
            {
              "presets": [
                "es2015",
                "react",
                "stage-0"
              ]
            }
          ]
        ],
        browserifyOptions: {
          debug: true,
          extensions: ['.js', '.jsx'],
          entries: ['./src/js/index.js']
        }
      },
      dist: {
        src: ['src/index.js'],
        dest: 'dist/index.js'
      }
    }

I am importing a node module which contains react component.

import orb from 'orb';
import React from 'react';

class ReactComponent extends React.Component {
   componentDidMount() {
    this.ptable = new orb.pgridwidget(this.props.config);
    this.ptable.render(ReactDom.findDOMNode(this));
   }
   render() {
      return (<div></div>);
   }
}

export ReactComponent;

I am getting following error.

SyntaxError: Unexpected token (102:12) while parsing //node_modules/orb/src/js/react/orb.react.PivotChart.jsx while parsing file: //node_modules/orb/src/js/react/orb.react.PivotChart.jsx

Token position being mentioned is basically jsx. Looks like babelify is not using preset react for node_modules. How to make browserify use babel presets react for this file?

Update While working on webpack I have faced similar issue which I was able to resolve later. But looks like browserify don't accept additional files like webpack does. Tried options like noParse, external but those are not working.

thecodejack thecodejack · Accepted Answer · 2016-11-23T12:25:30

Able to resolve the issue by adding node module main file to entries object. This is not clearly mentioned in definition for entries in config object.

browserifyOptions: {
          debug: true,
          extensions: ['.js', '.jsx'],
          entries: ['node_modules/orb/src/orb.js', './src/js/index.js']
        }

Added a new entry in browserifyOptions

Error when trying babelify of a react application which has another react component as node module

1 Answers