CODEWITHSUNDEEP
reactjsreact-scripts
M Hussain
M Hussain

Reputation: 77

react-script: Transpiling Third party JSX files

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

Upvotes: 2

Views: 1668

Answers (1)

Alvin S. Lee
Alvin S. Lee

Reputation: 5182

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:

  1. 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
  1. Then, in your App.jsx file, do:
import { Link } from './myreactlib/Link'

Additional Information:

Upvotes: 1

Related Questions