How to create npm package for react

Question

I've created this great string parser which parse the string and display only 5 lines or approx 1000(1000+ it'll adjust according to word length) characters(whichever is less) on screen. I've published my package on npm but on installing it I get this error:

Module parse failed: C:\xampp\htdocs\gitlab\communityFrontend\node_modules\react-simple-read-more\src\string-parser.js Unexpected token (77:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (77:12)

here is package.json of that same package Can anyone please help me with this issue?

Answer 1

The problem you experience is due to the fact that your string--parser is not a pure javascript file. But instead it uses JSX syntax. And that is the reason why it complains about unexpected token such as < in the following line:

<div style={{width:'100%',wordWrap: 'break-word'}}>

You must transpile your JSX sources to pure javascript before publishing to NPM - so anyone can consume them. And surely do not name JSX files with JS extension to avoid such confusions in the future.