Issue with publishing to npm

2019-07-23 20:25发布

问题:

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!

回答1:

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/