Adding react component from npm with browserify -- js vs jsx


#1

I’m trying to add this react component to my meteor project:

I added this with standard browserify/npmhacks process. When I run the app initial thereafter, I receive this error:

Marks-MacBook-Air:meteor-app markshust$ meteor --settings settings/dev.json
  [[[[[ ~/Sites/meteor-app ]]]]]

=> Started proxy.
=> Started MongoDB.
  npm-container: updating npm dependencies -- react-native-swipeout, externalify...
=> Errors prevented startup:

  While processing files with cosmos:browserify (for target web.browser):
lib/app.browserify.js: Unexpected token (53:6) while parsing file:
  /Users/markshust/Sites/meteor-app/packages/npm-container/.npm/package/node_modules/react-native-swipeout/index.js

While processing files with cosmos:browserify (for target os.osx.x86_64):
lib/app.browserify.js: Unexpected token (53:6) while parsing file:
  /Users/markshust/Sites/meteor-app/packages/npm-container/.npm/package/node_modules/react-native-swipeout/index.js

=> Your application has errors. Waiting for file change.

When I pull up line 53 of https://github.com/dancormier/react-native-swipeout/blob/master/index.js, it’s hitting some jsx. The file is named with a .js suffix, so it appears Meteor is having a problem when it runs into the jsx code.

I’m assuming this is a common problem when using react components from npm with meteor. How does one easily resolve this?

Many thanks!
Mark

packages.json

{
  "react-native-swipeout": "2.0.8",
  "externalify": "0.1.0"
}

lib/app.browserify.js

Swipeout = require('react-native-swipeout');

lib/app.browserify.options.json

{
  "transforms": {
    "externalify": {
      "global": true,
      "external": {
        "react": "React.require"
      }
    }
  }
}

#2

This seems to be a React Native component. How were you expecting to get it work with regular React?


#3

Yea, I don’t think I was aware of React Native when I posted this (or didn’t understand it). You can disregard this post :slight_smile: