So I am trying to build an Open Source project using react and pushing it to npm. The issue is, my components, while they work great on a test environment - mounted to other components but when I publish it to npm and download the package and try to access it, it gives me an error.
Here is a small sample of the code
import React, {Component} from 'react';
import {Nav, NavBar, NavLink, NavItem} from 'react-bootstrap';
class GitNav extends Component{
handleSelect(eventKey){
window.location = this.props.NavURLs[eventKey];
}
render(props){
const NavTextItems = this.props.NavTexts.map((eachNav, key) =>
<NavItem eventKey={key} href="#">{eachNav}</NavItem>
);
return(
<Navbar fixedBottom collapseOnSelect>
<Navbar.Header>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav onSelect={this.handleSelect.bind(this)}>
{NavTextItems}
</Nav>
</Navbar.Collapse>
</Navbar>
);
}
}
export default GitNav;
Here is the error:
Error in ./~/react-github-nav/index.js
Module parse failed: /Users/theawesomeguy/Desktop/Projects/resume3/resume/node_modules/react-github-nav/index.js Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (11:6)
@ ./src/App.js 20:22-49
If anyone can help me out with this, that will be great. Thanks in advance!
In order to push react libraries into NPM, you may need some boilerplate which will install and convert many things for you.
=====
I've also pushed several react libraries successfully into NPM:
https://www.npmjs.com/~thinhvo0108
https://www.npmjs.com/package/react-sticky-dynamic-header
https://www.npmjs.com/package/react-ringing-bell
=====
Your github repositories' folder structure should also look like mine:
https://github.com/thinhvo0108/react-sticky-dynamic-header
https://github.com/thinhvo0108/react-ringing-bell
=====
Useful tutorial below here:
(boilerplate source) https://github.com/juliancwirko/react-npm-boilerplate
(author's article) http://julian.io/creating-react-npm-packages-with-es2015/