react-script: Transpiling Third party JSX files - reactjs

Question

I am developing application using create-react-app, and using third party module which is not compile, I am including JSX file from this to my project.
getting following error when start or build
******.jsx
Module parse failed: Unexpected token (12:25)
You may need an appropriate loader to handle this file type.
My react application is not eject and don't want to eject.
I don't want to eject from react-script
Sample code
Link.jsx in Library
import React from 'react';
import { string } from 'prop-types';
import './Link.scss';
const STATUS = {
HOVERED: 'hovered',
NORMAL: 'normal',
};
class Link extends React.Component {
constructor(props) {
super(props);
this.onMouseEnter = this.onMouseEnter.bind(this);
this.onMouseLeave = this.onMouseLeave.bind(this);
this.state = {
className: STATUS.NORMAL,
};
}
onMouseEnter() {
this.setState({ className: STATUS.HOVERED });
}
onMouseLeave() {
this.setState({ className: STATUS.NORMAL });
}
render() {
const { className } = this.state;
const { page, children } = this.props;
return (
<a
className={className}
href={page}
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}
>
{children}
</a>
);
}
}
Link.propTypes = {
page: string,
children: string,
};
Link.defaultProps = {
page: '#',
children: '',
};
export default Link;
Above code is publish to internal npm repo and used in application
App.jsx in application
import { Link} from '#myScope/myreactlib/Link'; // loaded from node_modules
App.jsx give error

Answer 1

When using create-react-app without ejecting, you will have some restrictions on how you can import modules.
If it is a custom module that you have built, then it needs to be in your src folder, and you import it using a path relative to your current file's path. For example: import MyComponent from './components/MyComponent
If it comes from a third-party dependency package (for example, reactstrap or #blueprintjs/core) which you have already added with npm or yarn, then you import it simply by specifying the package name. For example: import { Button } from 'reactstrap'
In your case, it sounds like you have a sub-folder in your node_modules folder which is for a package that you did not add with npm or yarn. While I doubt that it's recommended to use third-party packages this way, I'll assume that you have a good reason for doing so.
Without being able to see your entire setup, I would propose you try the following workaround:
In your src folder, create a symlink to the folder with your third-party package. For example (while in your project's src folder):
ln -s ../node_modules/#myScope/myreactlib myreactlib
Then, in your App.jsx file, do:
import { Link } from './myreactlib/Link'
Additional Information:
StackOverflow: The create-react-app imports restriction outside of src directory
StackOverflow: Import module from node_modules (create-react-app)
create-react-app documentation on importing a component