2

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

vsync
  • 118,978
  • 58
  • 307
  • 400
M Hussain
  • 87
  • 1
  • 10
  • Could you give more information as to what module you are using and how you are using it, please? – Garrett Motzner Feb 15 '19 at 06:21
  • @GarrettMotzner, the module which we are using is not publicly available its internal module which is not compiled and publish, its has been publish as it is with JSX, and can be use referring JSX. While we don't have control about this this can be consider its another internal library. – M Hussain Feb 15 '19 at 06:23
  • If you're using create-react-app out of the box, the babel loader should handle your jsx files without a problem. Is it possible that your jsx file, at line 12, just has some sort of syntax error? If you could post even a part of that jsx file (for example, the first 20 lines), that may be helpful for you to get a response that points you in the right direction. – Alvin S. Lee Feb 15 '19 at 08:21
  • @AlvinLee jsx files which I am trying to load is from node_modules. which is giving me error. – M Hussain Feb 15 '19 at 09:09
  • @MHussain I understand. Are you able to post *which* node_module (with version) and file this is? That would be helpful for us to help you with your issue. – Alvin S. Lee Feb 15 '19 at 09:14
  • @AlvinLee update question with sample code – M Hussain Feb 15 '19 at 10:57
  • @MHussain Can you also post your package.json file? That will help to see if you have any loaders configured or if there is anything else which is affecting the load of this jsx. – Alvin S. Lee Feb 15 '19 at 11:15
  • @AlvinLee its app create with CRA with no additional configuration – M Hussain Feb 15 '19 at 12:44

1 Answers1

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:

  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:

Alvin S. Lee
  • 4,984
  • 30
  • 34
  • @MHussain It looks like this answer solved your issue, yes? I might recommend changing the title of your question to more accurately reflect the issue, so that others with a similar issue will find it more easily. Perhaps change it to "create-react-app: how to import modules in node_modules that were not added as packages" – Alvin S. Lee Feb 16 '19 at 05:01
  • I have this same issue. I'm using npm link to get access to my custom built react component in JSX. I believe the reason create-react-app complains about this is that it expects imported components to be compiled to regular JS (it mentions this in the webpack config inside react-scripts). I'm wondering if there is some configuration you can do with create-react-app to change this behavior. – J. Schei Sep 04 '19 at 19:40