Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting Unexpected Token when parsing JSX with no other information #1947

Open
Jordan4jc opened this Issue Jul 25, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@Jordan4jc
Copy link

Jordan4jc commented Jul 25, 2018

Steps to reproduce

import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import styles from "./styles";
import { connect } from 'react-redux';
import { compose } from 'recompose';
import Snackbar from '@material-ui/core/Snackbar';
import Typography from '@material-ui/core/Typography';
import { closeSnackBar, openSnackBar } from '../../actions/snack-bar';

class App extends Component {
  componentDidMount() {
    setTimeout(() => {
      this.props.dispatch(openSnackBar({
        message: 'Test Message'
      }))
    }, 2000);
  }
  render() {
    const { classes } = this.props;
    const snackBarOrigin = (this.props.width === 'sm' || this.props.width === 'xs') ? { vertical: 'bottom', horizontal: 'left' } : { vertical: 'bottom', horizontal: 'left' };
    return (
      <div className={classes.app}>
        {/* REMOVE THIS CONTENT */}
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
          <Typography variant="display4">Hello World</Typography>
          <Typography variant="display1">You can remove this content in components/App/index.jsx</Typography>
        </div>
        {/* REMOVE THIS CONTENT */}
        <div id="dialog-holder"></div>
        <Snackbar
          anchorOrigin={snackBarOrigin}
          open={this.props.snackBar.open}
          onClose={() => this.props.dispatch(closeSnackBar())}
          ContentProps={{
            'aria-describedby': 'message-id',
          }}
          autoHideDuration={this.props.snackBar.autoHideDuration}
          message={<span id="message-id">{this.props.snackBar.message}</span>}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    snackBar: state.snackBar
  };
};

export default withRouter(compose(
  connect(mapStateToProps),
  withStyles(styles),
  withWidth()
)(App));
const AppIndexJsx = this.fs.read(this.destinationPath(`src/components/App/index.jsx`))
const AST = esprima.parse(AppIndexJsx, { jsx: true })

Expected output

A valid AST

Actual output

{ Error: Line 1: Unexpected token
    at ErrorHandler.constructError (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:5012:22)
    at ErrorHandler.createError (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:5028:27)
    at JSXParser.Parser.unexpectedTokenError (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:1985:39)
    at JSXParser.Parser.tolerateUnexpectedToken (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:1998:42)
    at JSXParser.Parser.parseStatementListItem (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:3371:31)
    at JSXParser.Parser.parseScript (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:4723:29)
    at Object.parse (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/esprima/dist/esprima.js:122:61)
    at writing (/Users/jordanriser/workspace/generators/generator-react-app/generators/dialog/index.js:13:27)
    at Object.<anonymous> (/Users/jordanriser/workspace/generators/generator-react-app/node_modules/yeoman-generator/lib/index.js:417:23)
    at /Users/jordanriser/workspace/generators/generator-react-app/node_modules/run-async/index.js:25:25 index: 0, lineNumber: 1, description: 'Unexpected token' }

Relevant references

I'm using yeoman to try to read an AST and add some new content to it in my generator. The file gets read just fine and produces the above code string, when I add the esprima parsing into it I get that error with no other information

I pasted this code into the parser on the esprima website and on line 24 I get a syntax error Error: Line 24: Unexpected token <
This is valid JSX so I'm having some truble understanding what the error is and how I need to fix it

@rohit-daffodil

This comment has been minimized.

Copy link

rohit-daffodil commented Aug 30, 2018

I am also facing the same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.