Developing React Library - JSX Parse Issue - reactjs

Question

I am trying to develop an NPM module that will provide react components. Right now, I'm just trying to set up the package and cannot get JSX in the components to be recognized in an example react project using the library.
My npm package project has one component:
import React from 'react';
class AfWin extends React.Component {
render() {
return <div></div>;
}
}
export default AfWin;
And this component is referenced in the index.js file pointed to as main in the package.json file:
import AfWin from './AfWin';
export default { AfWin };
To pack and import this package, I use a command prompt and type: npm pack. Then, I go to my example create-react-app and import the created .tgz file with npm install C:\path\to\file.tgz. This works, and I am able to get the AfWin component in my example app. However, the <div></div> or any JSX I try causes a problem at runtime:
Module parse failed: C:\path\to\project\node_modules\module-name\AfWin.js Unexpected token (6:15)
You may need an appropriate loader to handle this file type.
|
| render() {
| return <div></div>;
| }
| }
To make the problem more concrete, I published my broken module to npm: npmjs.com/package/react-affine