strange parsing errors since 4.1.0

[apaleslimghost]

eslint depends on espree@^4.0.0, which pulls in 4.1.0 on a fresh install. since installing this version, we've been getting strange Parsing errors on perfectly normal JSX syntax, e.g. in this build https://circleci.com/gh/Financial-Times/x-dash/1197. the referenced lines aren't anything weird. our .eslintrc.js includes a few plugins, including eslint-plugin-react, but is otherwise quite minimal.

when running npm install, i did note that it output:

npm ERR! peer dep missing: acorn@^6.0.0, required by acorn-jsx@5.0.0

even though espree includes acorn@^6.0.0 in its dependencies. seems like this might be a cause, if it's using an incompatible version of acorn from somewhere?

[s100]

Reproduction of error:

require('espree').parse("<div a='b' />", { ecmaFeatures: { jsx: true } })

In espree@4.0.0 this returns a parse tree, in espree@4.1.0 it throws a "SyntaxError: Unexpected token =" at line 1, index 6.

[not-an-aardvark]

cc @mysticatea

[not-an-aardvark]

Hi, thanks for the report. However, I can't seem to reproduce this issue (using Node v11.0.0):

$ npm i espree@4.1.0
npm WARN enoent ENOENT: no such file or directory, open '/path/to/espree-bug/package.json'
npm WARN espree-bug No description
npm WARN espree-bug No repository field.
npm WARN espree-bug No README data
npm WARN espree-bug No license field.

+ espree@4.1.0
added 4 packages from 2 contributors in 0.906s
found 0 vulnerabilities

~/path/to/espree-bug$ node
> require('espree').parse("<div a='b' />", { ecmaFeatures: { jsx: true } })
Node {
  type: 'Program',
  start: 0,
  end: 13,
  body:
   [ Node {
       type: 'ExpressionStatement',
       start: 0,
       end: 13,
       expression: [Node] } ],
  sourceType: 'script' }

What versions of acorn and acorn-jsx do you have installed with espree? When I installed espree@4.1.0, acorn@6.0.2 and acorn-jsx@5.0.0 were installed along with it.

[debugwand]

digging into node_modules after removing and re-installing,

• acorn@6 is inpeerDependencies of acorn-jsx
• however, node_modules/acorn is version 5. It is required in JSDOM's dependencies as "acorn": "^5.5.3",
• JSDOM is version 11, and I've chased that back through the dependency tree as coming in as a result of Jest v23 (if you're using JSX there's a good chance you're using Jest)

[s100]

Well when I tried in an empty directory and did what you just did, I no longer saw the error. So I suspect that the issue here is something to do with the specific structure of node_modules I have, which (abbreviated) is:

node_modules
    acorn (@5.7.3) (no deps)
    acorn-jsx (@5.0.0) (peer dependency on acorn@^6.0.0)
    eslint-visitor-keys (@1.0.0) (no deps)
    espree (@4.1.0) (depends on acorn@^6.0.2, acorn-jsx@^5.0.0, eslint-visitor-keys@^1.0.0)
        node_modules
            acorn (@6.0.2) (no deps)

Like .@quarterto I also see npm WARN acorn-jsx@5.0.0 requires a peer of acorn@^6.0.0 but none is installed. You must install peer dependencies yourself in my npm install output. So I think this may not a problem with espree specifically. Apologies.

Edit: acorn-jsx@5.7.3 is used by webpack@4 among other things, which explains its presence here.

[not-an-aardvark]

I think this is a result of the same npm bug that was discussed in eslint/eslint#10022.

[jvswatson]

To confirm the npm dependency issue, we ran into this problem and discovered that we had an unused dev dependency with blanket, which would install acorn@1.2.2, so the espree dependencies would then grab acorn-jsx@5.0.0 and not acorn. Removing the reference to blanket in package.json immediately got our tests running again. Anyone else seeing this issue might try looking to see where else npm is deciding to install acorn and seeing if that can be removed/tweaked.

[mysticatea]

Looks like a bug in npm's installation logic. espree@4.1.0 has the dependencies acorn@^6.0.2 and acorn-jsx@^5.0.0, but npm didn't look to set up those correctly.

I could reproduce it with npm@6.2.0:

1. rm -rf node_modules
2. npm i blanket eslint
3. npm ls espree acorn acorn-jsx

+-- blanket@1.2.3
| +-- acorn@1.2.2
| `-- falafel@1.2.0
|   `-- acorn@1.2.2  deduped
`-- eslint@5.7.0
  `-- espree@4.1.0
    `-- acorn-jsx@5.0.0

Looks acorn@6.x is lost.

[s100]

As a workaround I've found that explicitly adding

    "acorn": "^6.0.2",
    "acorn-jsx": "^5.0.0",
    "espree": "^4.1.0",

to my package.json's devDependencies forces all three packages to be installed at the top level of node_modules, where they can find one another.

[keenwon]

I also encountered this problem, any updated status on this?

[mysticatea]

No. We are awaiting. This is npm's bug and the npm CLI team has a plan to fix the bug by Summer in 2019.

[ljharb]

Still, since some change in eslint’s dep tree triggered it, surely there’s something eslint could do to reverse it in the meantime?

[ljharb]

(like, switch to require espree ~4.0)

[mysticatea]

No.

I don't think the revert makes sense. This causes by acorn's breaking change. Currently, the npm's bug appears when there is a older acorn in another dependency. After reverting, it will appear when there is a newer acorn in another dependency.
eslint/eslint#11018 (comment)

[martijnsenden]

No. We are awaiting. This is npm's bug and the npm CLI team has a plan to fix the bug by Summer in 2019.

Any news on this?