jquery / jquery/esprima

Getting Unexpected Token when parsing JSX with no other information

Open
#1,947 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
7.1k
Forks
773
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/components/App/index.jsx and the esprima.parse call in generators/dialog/index.js, then reproduce the reported JSX parse failure. Compare the input and parser options with the expected valid AST, and use the failing example to determine what behavior should be considered fixed.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.