eslint 6.2.0 unexpected token = and /

[electriquo]

My environment

$ uname -a
Darwin foo.baz 18.7.0 Darwin Kernel Version 18.7.0: Thu Jun 20 18:42:21 PDT 2019; root:xnu-4903.270.47~4/RELEASE_X86_64 x86_64

• ESLint Version: 6.2.0

$ cat package.json | jq '.devDependencies.eslint'
"^6.2.0"
$ cat node_modules/eslint/package.json | jq '.version'
"6.2.0"

• Node Version: 12.8.1

$ node --version
v12.8.1

• npm Version: 6.10.3

$ npm --version
6.10.3

Please show your full configuration:

$ cat .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es6:     true,
    node:    true,
    jest:    true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jest/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: "2018",
    sourceType:  "module",
  },
  plugins: [
    "react",
    "jest",
    "jsx-a11y"
  ],
  rules: {
    indent: [
      "error",
      2
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    quotes: [
      "error",
      "double"
    ],
    semi: [
      "error",
      "always"
    ],
    "key-spacing": [
      "error",
      {align: "value"}
    ],
    "no-console":           "off",
    "no-debugger":          "warn",
    "no-alert":             "warn",
    "object-curly-spacing": [
      "error",
      "never"
    ],
    "array-bracket-spacing": [
      "error",
      "never"
    ]
  },
  overrides: [
    {
      files: ["*.test.js"],
      rules: {
        "react/no-find-dom-node": "off"
      }
    }
  ],
  settings: {
    react: {
      version: "detect"
    }
  }
};

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

$ cat src/components/App/App.js

"use strict";

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div id="container">
        <p>
          hello internet!
        </p>
      </div>
    );
  }
}

export default App;

$ cat src/index.js

"use strict";

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App/App";

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

$ npx eslint src/**/**.js

What did you expect to happen?
that all linting will pass.
when running eslint@6.1.0, it passes fine.
when running eslint@6.2.0 it fails as above.

What actually happened? Please include the actual, raw output from ESLint.

$ npx eslint src/**/**.js

/Users/foo/react/src/components/App/App.js
  8:14  error  Parsing error: Unexpected token =

/Users/foo/react/src/index.js
  8:8  error  Parsing error: Unexpected token /

✖ 2 problems (2 errors, 0 warnings)

[g-plane]

Hi @y0y0z , it seems that there is something wrong with your configuration file.

The value of ecmaVersion must be a number, not a string.

[ljharb]

@g-plane i think that's a red herring; i'm getting the same in https://github.com/airbnb/react-dates when i try to upgrade to eslint 6, and i have it as a number.

[electriquo]

Hi @y0y0z , it seems that there is something wrong with your configuration file.

The value of ecmaVersion must be a number, not a string.

@g-plane: i get the same error when changing "2018" (string) with 2018 (number)

[g-plane]

It seems that it works well on the demo:
Demo 1
Demo 2

[electriquo]

@g-plane: clear to me that the lint should not fail, as this is the case with the previous version (6.1.0). also, i am not sure that the link that you posted coincide with the configuration excert above.

[g-plane]

The demo is running ESLint 6.2.0. It's the same version as you're using. Also, the parser options of the demo above are same with yours.

[electriquo]

@g-plane: i did not see that the online linting respect my configuration. but if you are insisting it is, then we should not argue about it :)

[ljharb]

@g-plane it's possible that something in eslint's dep tree isn't deterministic, such that deduping might cause the wrong version of espree and/or acorn to be used. This was the case in eslint 5 as well; there's another closed issue about it.

[g-plane]

@ljharb So can we try removing the node_modules directory and installing dependencies again?

[ljharb]

@g-plane my issue is reproducible both locally and in CI (where node_modules is always fresh).

See https://travis-ci.org/airbnb/react-dates/jobs/572611629

[aladdin-add]

possible duplicate of #11018, could you try npm ls espree and npm ls acorn?

[electriquo]

@aladdin-add:

$ npm ls espree
react-app@1.0.0 /Users/foo/react
└─┬ eslint@6.2.0
  └── espree@6.1.0

$ npm ls acorn
react-app@1.0.0 /Users/foo/react
├─┬ eslint@6.2.0
│ └─┬ espree@6.1.0
│   └── acorn@7.0.0
├─┬ jest@24.9.0
│ └─┬ jest-cli@24.9.0
│   └─┬ jest-config@24.9.0
│     └─┬ jest-environment-jsdom@24.9.0
│       └─┬ jsdom@11.12.0
│         ├── acorn@5.7.3
│         └─┬ acorn-globals@4.3.2
│           └── acorn@6.1.1
└─┬ webpack@4.39.2
  └── acorn@6.3.0

[platinumazure]

We saw this when releasing espree over the weekend and trying to release ESLint yesterday.

This is an npm issue. Npm does not deduplicate the dependency tree correctly in some cases, and as a result, an old version of Acorn (espree dependency) is pulled into espree.

The only way we've found to for sure avoid this is to rm -rf node_modules and then npm install --legacy-bundles, which forces npm to use the old, un-flattened/-deduplicated installation mode from npm@2.

Another option that could maybe work in your case is to add acorn 7.0.0 as a dependency or devDependency in your project (updating ESLint's direct dependency on Acorn was what got us out the door yesterday).

Again, the root cause is an npm@>=3 deduplication bug.

[electriquo]

@platinumazure:
i tried both:

forcing npm to un-flatten dependencies:

$ rm -rf node_modules && npm install --legacy-bundling

also tried

add acorn 7.0.0 as a dependency

by executing

$ npm install acorn@latest --save-dev

both did not work for me.

[platinumazure]

both did not work for me.

Hmm... Then I'm not sure what's going on... We'll need to investigate further.

[g-plane]

FWIW, I've tried with Yarn, and it works well.

[ljharb]

The Travis log i linked included using the legacy bundles option, so that’s not it.

If espree added acorn as both a peer and a regular dep, that might fix it, however.

[platinumazure]

@ljharb Why would adding a peer dep help here?

[ljharb]

Oh, i assumed the issue was that it was already a peer dep. it’s a regular dep now?

[platinumazure]

@ljharb espree declares acorn as a dependency, because it uses acorn to do the initial parse. (Basically, espree calls acorn, and then converts the output to ESTree.)

ESLint declares acorn as a devDependency. The reason for this is because we use acorn to create a loose parser for some tests (i.e., to handle recoverable errors as recoverable, which espree currently does not support).

Neither project declares acorn as a peer dependency. That seems correct to me, since espree does not expect an acorn instance to be passed in by consumers. But if you think that's incorrect, please let us know what you suggest we should do.

[ljharb]

I guess I’m unclear then on how this bug happens. If espree declares acorn as a regular dep, and then npm gives it the wrong version, it should make npm ls fail, but it’s not failing.

[mysticatea]

This bug is:

1. acorn-jsx requires acorn.
2. acorn-jsx has acorn in peerDependencies because the acorn must be the same entity of end-user's acorn.
3. espree has acorn and acorn-jsx in dependencies.
4. npm doesn't hoist acorn if a different version of acorn existed on another place of the depencency tree, but hoists acorn-jsx. For example,

   node_modules
   ├ acorn 6 (from another dep)
   ├ acorn-jsx (from espree)
   └ espree
     └ node_modules
       └ acorn 7
   

5. therefore, acorn-jsx and espree import different versions of acorn and get broken.

Anyway, I'm closing this issue because this is a duplicate of #11018.

[electriquo]

@mysticatea: thank you for the details explanation. could you please offer a bypass without pinning eslint to version 6.1.0?

[mysticatea]

Please read #11018 :)

The solution is different per environments because the reason that npm doesn't hoist acorn is different per environments. The most reliable solution is to use npm@2-style installation that was mentioned in that issue. (or use yarn)

npm Inc. has noticed this problem and they have a plan to fix. I hope npm@7 to fix this bug (https://blog.npmjs.org/post/186983646370/npm-cli-roadmap-summer-2019)

[ljharb]

As i said above tho, npm 2 style install doesn’t fix the issue on react-dates.

[mysticatea]

Oh, sorry.

[electriquo]

@ljharb: can you bump the version of your npm and check? i am using npm version 6.10.3.

[SimenB]

Only code change in 6.2.1 is #12131 - doesn't seem like that should fix anything (unless you have a lockfile)? I'm currently locked to 6.1.0 anyways (#12117), so I haven't tested any upgrade

[electriquo]

@SimenB: this is what i did in order to verify whether bumping eslint to version 6.2.1 solved my issue:

$ rm -rf node_modules package-lock.json
$ npm install
$ npx eslint src/**/**.js
$ echo $?
0

[ljharb]

@y0y0z npm is automatically bumped to latest in Travis-CI on react-dates using nvm install-latest-npm, so that has no impact.

[aladdin-add]

@SimenB \ @aladdin-add \ @mysticatea: i've upgraded to version 6.2.1 and my issues are gone! :)

@y0y0z I think it's because acorn-jsx just published v5.0.2 😄
https://github.com/RReverser/acorn-jsx/releases/tag/5.0.2

[ljharb]

Still broken: https://travis-ci.org/airbnb/react-dates/jobs/574535275

`npm ls acorn acorn-jsx`

react-dates@20.3.0 /Users/ljharb/Dropbox/git/react-dates.git
├─┬ eslint@6.2.1
│ └─┬ espree@6.1.0
│   ├── acorn@7.0.0 
│   └── acorn-jsx@5.0.2 
├─┬ react-with-styles-interface-css-compiler@2.0.0
│ └─┬ jsdom@11.12.0
│   ├── acorn@5.7.3 
│   └─┬ acorn-globals@4.3.3
│     └── acorn@6.3.0 
└─┬ webpack@4.39.2
  └── acorn@6.3.0 

acorn v6.3 is at the top level of node_modules, as is acorn-jsx v5.0.2.

[electriquo]

@mysticatea: do you consider this issue as resolved?

[aladdin-add]

Rerunning the CI job (which would install 6.2.1 via semver) did not fix it, with npm 2 style bundling;

@ljharb I guess it's working now -- acorn-jsx published a new version with peerDependency: acorn v7. can you rerun it?

[platinumazure]

@aladdin-add See this comment, I think Jordan was saying his CI is still not fixed.

[aladdin-add]

this is why the issue happening:

it should have been working to use npm2-style installing, but at that time acorn-jsx has a peer dependency acorn v6 (npm 2 will install peer deps) -- it is fixed now!

[ljharb]

I’ll rerun the job and try it again.

[ljharb]

Still failed, same error.

[electriquo]

i am not experiencing the issue any more. this is my current environment and i hope it helps.

$ node -v
v12.9.0
$ npm -v
6.11.1
$ rm -rf node_modules package-lock.json
$ npm install
...
$ npx eslint src/**/**.js
...
$ echo $?
0
$ npm ls espree acorn
react-app@1.0.0 /Users/foo/react
├── acorn@7.0.0
├─┬ eslint@6.2.1
│ └─┬ espree@6.1.0
│   └── acorn@7.0.0  deduped
├─┬ jest@24.9.0
│ └─┬ jest-cli@24.9.0
│   └─┬ jest-config@24.9.0
│     └─┬ jest-environment-jsdom@24.9.0
│       └─┬ jsdom@11.12.0
│         ├── acorn@5.7.3
│         └─┬ acorn-globals@4.3.3
│           └── acorn@6.3.0
└─┬ webpack@4.39.2
  └── acorn@6.3.0

[ljharb]

The CI job I linked to includes a git branch; you can all clone it yourself and look into whatever you like :-)

[aladdin-add]

@ljharb it's working well to use npm2-style installing🎉. see https://travis-ci.org/airbnb/react-dates/builds/575135825?utm_source=github_status&utm_medium=notification

[ljharb]

@aladdin-add wow, thanks. it was failing for me before, but i'll take the w.

For the record, npm bug or not, I'm still convinced that this is something eslint's dep graph can fix on its own - otherwise this same bug would be occurring in babel and react, both ecosystems that make heavy use of peer deps.

[kaicataldo]

I really would like to see if we can figure out why we're seeing this issue more than other projects.

[aladdin-add]

One possible option is: bundling eslint/espree(using something like ncc), it also brings a faster bootup(https://zeit.co/blog/ncc#faster-bootup)

[mysticatea]

Webpack and Rollup have the same problem.

If this is not a bug of npm then this is the problem in Acorn. This problem appears when two Acorns are different entities: (1) Acorn that plugins loaded, (2) Acorn that is using the plugins. If Acorn did pass self token type objects to plugins, this problem will disappear.

[mysticatea]

I have opened an issue on acorn: acornjs/acorn#870

I'm closing this issue because of duplicate. Please track on #11018 and acornjs/acorn#870.