React webpack / browserify “unexpected token”

Question

I have this npm module that I created and every time I try to include it to see if it works I get this error:

Unexpected token <
You may need an appropriate loader to handle this file type.

I've used react-starterkit and included it in main.js like so

var ReactDOM = require('react-dom');
var ColorPicker = require('color-picker-react');
ReactDOM.render(<ColorPicker />, document.getElementById('app'));

then when i run gulp which runs webpack I get the error. Here's the webpack.config.js

module.exports.getConfig = function(type) {

  var isDev = type === 'development';

  var config = {
    entry: './app/scripts/main.js',
    output: {
      path: __dirname,
      filename: 'main.js'
    },
    debug : isDev,
    module: {
      loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }]
    }
  };

  if(isDev){
    config.devtool = 'eval';
  }

  return config;
}

I've tried everything I could think of and still can't get it to work. I'm not using ES6 anywhere and I've tried many different react starter kits but I just can't get it to work. Please help!!!

PS I am able to get the project to run when I clone it locally and build out app.js with browserify like so: browserify -t [ babelify --presets [ react ] ] app.js -o bundle.js

Answer 1

To solve the problem you need to remove the line exclude: /node_modules/ if you are not the author of the npm module (But you should go with another module).

The component color-picker-react doesn't seem to have a release build or script that compile the jsx. So you need to do it by your own and compile the jsx file on the fly using wepack.

Instead of just removing the exclude: /node_modules/

You can exclude all /node_modules/ except the /node_modules/color-picker-react folder by using a regex pattern :

//will exclude all modules except `color-picker-react`
exclude: /node_modules\/(?!color-picker-react).*\//,

EDIT Basics for creating a npm module :

A correct setup for a npm module is to add a prepublish script to ensure compilation happens automatically before uploading to NPM.

Thus when you push your module to npm the users doesn't need to compile the module they can just require it.

Taking an example of a node_module: https://github.com/securingsincity/react-ace/blob/master/package.json

The package.json file is saying which file is the entry point when you required the module

 "main": "lib/ace.js",

You can see in the github repository that the lib folder doesn't exist because added to the .gitignore but the line

  "prepublish": "npm run clean && npm run build"

is run before uploading to NPM so on the npm repository the lib/ folder exist and you can see it when you do npm install --save react-ace the lib folder appears in the node_modules/react-ace/ folder

A great link that explains how to build npm modules in es6 for example http://javascriptplayground.com/blog/2015/10/authoring-modules-in-es6/

EDIT explain what needs to be done on react-color-picker module :

Sorry i didn't see that you was the author of the module so you should go with the solution below .

The react-color-picker for example doesn't have a prepublish script and the main file is index.js which is

var ColorPicker = require('./colorpicker.js'); // require a file with jsx will throw an error if not precompiled 

module.exports = ColorPicker;

So a syntax error is thrown.

To be able to use the npm module in your other applications :

1. Create a webpack config for the npm module to handle the conversion of your react component written using jsx (you can take some of the webpack configs of this module https://github.com/securingsincity/react-ace set libraryTarget: 'umd' you module will be more easy to consume from various module systems (global, AMD, CommonJS).)
2. add a prepublish script that output a precompiled version of the color picker ( lib/pickedprecompiled.js )
3. change the main to "main": "lib/pickedprecompiled.js",