I made a jsx file with a React component. I can require locally and everything works fine. However, when I use the version I published to npm by doing npm install react-tabs-component, rendering works none of the event handlers fire. No errors or warnings.
I don't think there's anything wrong with the code, because it works locally and it passes a thorough test suite.
I think I must have done something wrong with my package.json:
{
"name": "react-tabs-component",
"version": "1.1.1",
"description": "Tabs Component for React with the simplest API",
"keywords": [
"React",
"tabs",
"tab",
"component"
],
"repository": {
"type": "git",
"url": "https://github.com/mheiber/react-tabs-component"
},
"main": "Tabs.js",
"dependencies": {
"envify": "^3.4.0",
"react": "^0.12.0",
"reactify": "^1.1.0"
},
"author": "Max Heiber",
"browserify": {
"transform": [
"reactify"
]
},
"scripts": {
"test": "jest"
},
"jest": {
"rootDir": "./",
"scriptPreprocessor": "./jest-preprocessor.js",
"unmockedModulePathPatterns": [
"react",
"./node_modules/react/"
]
},
"devDependencies": {
"jest-cli": "0.4.0",
"react-tools": "0.13.1",
"reactify": "1.1.0"
},
"bugs": {
"url": "https://github.com/mheiber/react-tabs-component/issues"
},
"homepage": "https://github.com/mheiber/react-tabs-component",
"directories": {
"example": "examples"
},
"license": "ISC"
}
and here is a simplified version of the code from package:
var React = require('react/addons');
var getChildrenArray = function(context){
var children = [];
React.Children.forEach(context.props.children,function(child){
children.push(child);
});
return children;
};
var noop = function(){};
var Tabs = React.createClass({
propTypes:{
defaultTabNum: React.PropTypes.number,
},
getDefaultProps: function(){
return {
defaultTabNum: 0
};
},
getInitialState: function(){
return {activeTabNum: this.props.defaultTabNum};
},
setActiveTabNum: function(num,callback){
this.setState({activeTabNum: num},callback);
},
getActiveTabNum: function(){
return this.state.activeTabNum;
},
_change: function(e){
this.setActiveTabNum(newActiveTabNum,callback);
},
render: function(){
var children = getChildrenArray(this);
var activeTabContent = children[this.state.activeTabNum];
var tabs = this.props.tabNames.map(function(tabName,tabNum){
var isActive = (tabNum === this.state.activeTabNum);
return (
<span
key={'tab-'+tabNum}
data-tabnum={tabNum}
onClick={this._change}
>
{tabName}
</span>
);
}.bind(this));
return (
<div>
<nav>{tabs}</nav>
{activeTabContent}
</div>
);
}
});
module.exports = Tabs;
And here is the code that works when Tabs.js is in the same directory, but not when I use the version that is in node_modules when I npm install:
var Tabs=require('react-tabs-component');
var React=require('react');
React.render(
<Tabs tabNames={[1, 2, 3]}>
<p>1</p><p>2</p><p>3</p>
</Tabs>,
document.getElementById('react')
);
I'm using Browserify and Reactify.
I know I might be down-voted for posting this much code, but I didn't want to test by junking up npm with a lot of packages that don't work. Thanks for your help.