Standard cannot parse React JSX files

[evantahler]

What version of this package are you using?
13.1.0

What operating system, Node.js, and npm version?
Node v12
OSX (latest)

What happened?
Take a simple react JSX file (from: https://reactjs.org/docs/hooks-intro.html)

import React, { useState } from 'react'

function IndexPage () {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

export default IndexPage

However, Standard cannot parse the file and thinks the { is not valid JSX:

> standard

standard: Use JavaScript Standard Style (https://standardjs.com)
  /Users/evan/workspace/evantahler.com/pages/index.js:8:22: Parsing error: Unexpected token {

This seems to be a new type of bug.

What did you expect to happen?
Valid JS and Standard not to crash

Are you willing to submit a pull request to fix this bug?
Sure!

[feross]

I cannot reproduce this issue. Indeed, the demo site shows it works just fine: https://standardjs.com/demo.html?gist=ff5832e447327defb72164f9e245bd4a

My guess is that you're pulling in an old version of standard (perhaps install globally?)

Can you share the output of these commands, run from your project folder:

• standard --version
• npx standard --version
• npm ls standard

Thanks!

[evantahler]

First off, that demo site using a Gist is awesome!

I created a small demo project that uses Next.JS, Jest and Standard... and it works fine. There must be something else in my main project getting in the way... sorry to bother you!

Example Project: https://github.com/evantahler/react-next-standard-test

[feross]

Weirdly, I just ran into this issue on one my sites. Here's the build failure: https://travis-ci.org/feross/play.cash/builds/572130278?utm_source=github_status&utm_medium=notification

@evantahler Did you ever figure out the cause? Downgrading to standard@12 fixes the issue for me.

[feross]

Oh sheesh, it's a bug in npm. Life is too short for this...

npm doesn't seem to install dependencies correctly if a package which has a name before eslint in the alphabet order and has old acorn in their dependencies list....

It looks like this is a workaround: rm -rf node_modules && npm install --legacy-bundling

Related issues:

• eslint/espree#393
• eslint/eslint#11018

[mightyiam]

I'll take your word for it 🤣

[evantahler]

@feross Yes! That's great detective work.

I had an old version of Acorn in some projects, and I started re-installing deps 1-by-1 until it worked... and the working build lacks a top-level acorn requirement.

[evantahler]

It looks like for some projects, this is still a problem (see this upgrade and test suite) actionhero/www.actionherojs.com#63. npm install --legacy-bundling doesn't help