Parsing error

[xavierartot]

Hi,
I have a method in class and an error on the sign = at goToStore line definition
the message is
Parsing error: Unexpected token =
I have no warning or error in React, where did I wrong?

export default class Storepicker extends React.Component {
   goToStore = (event) => {
    event.preventDefault();
    console.log('You changed the URL');
    // first grab the test from the box
    // second we're going to transition from / to /store/:storeIt
  }
  render() {
    return (
      <div>
        <form className="store-selector" onSubmit={this.goToStore}>
          {/* sss */}
          <h2>Please Enter A Store</h2>
          <input type="text" required placeholder="Store Name" defaultValue={getFunName()} />
          <button type="submit" className="btn">
            Visit Store <span role="img" aria-label="go">🔥</span>
          </button>
        </form>
      </div>
    );
  }
}

I lint the code in Vim 8 with Ale

[ljharb]

What’s your eslint config? Class properties aren’t part of JavaScript yet.

[xavierartot]

I found the problem, thx

[baleeds]

I found the problem, thx

What was the fix? I'm having the exact same issue.

[ljharb]

It’s a bug with npm and eslint. You have to pin espree at v6, i think.

[baleeds]

Could you give more details?

There's no v6 in espree? https://www.npmjs.com/package/espree

[ljharb]

The specific solution is eslint/js#393 (comment)

[baleeds]

Hmmmm. Still no luck.

I'm using create-react-app with react-scripts 2.1.5.

My package json as it relates to dev dependencies now looks like this:

"devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/runtime": "7.0.0-beta.55",
    "acorn": "^6.0.2",
    "acorn-jsx": "^5.0.0",
    "cypress": "^3.1.5",
    "eslint-config-airbnb": "16.1.0",
    "espree": "^4.1.0",
    "node-sass-chokidar": "^1.3.3"
  },

Here's some folders from my node_modules relating to eslint:

My .eslintrc.json is:

{
    "extends": [
        "airbnb"
    ],
    "plugins": [
        "react"
    ],
    "rules": {
        "import/prefer-default-export": 0,
        "react/prop-types": 0,
        "react/no-danger": 0,
        "no-param-reassign": 0,
        "no-underscore-dangle": 0,
        "jsx-a11y/anchor-is-valid": [ "error", {
            "components": [ "Link" ],
            "specialLink": [ "to" ]
        }]
    },
    "env": {
        "browser": true,
        "jest": true
    },
    "globals": {
        "cy": false,
        "Cypress": false
    }
}

Yarn also gives these warnings:

warning " > eslint-config-airbnb@16.1.0" has unmet peer dependency "eslint@^4.9.0".
warning " > eslint-config-airbnb@16.1.0" has unmet peer dependency "eslint-plugin-import@^2.7.0".
warning " > eslint-config-airbnb@16.1.0" has unmet peer dependency "eslint-plugin-jsx-a11y@^6.0.2".
warning " > eslint-config-airbnb@16.1.0" has unmet peer dependency "eslint-plugin-react@^7.4.0".
warning "eslint-config-airbnb > eslint-config-airbnb-base@12.1.0" has unmet peer dependency "eslint@^4.9.0".
warning "eslint-config-airbnb > eslint-config-airbnb-base@12.1.0" has unmet peer dependency "eslint-plugin-import@^2.7.0".

Eslint was working well for the the past 6 months or so, but I recently spun up an unrelated new project. I'm not sure how the new project altered the eslint in this project, but it's not working correctly since, not recognizing the babel properties.

I've tried installing using yarn and npm both. Npm is version 6.8.0. Yarn is 1.7.0.

Here are my globally installed npm packages:

+-- apollo@2.5.3
+-- autoprefixer@9.4.6
+-- babel@6.23.0
+-- babel-cli@6.26.0
+-- babel-plugin-transform-class-properties@6.24.1
+-- bs-platform@4.0.18
+-- create-react-app@2.1.5
+-- cross-env@5.2.0
+-- cypress@3.1.3
+-- graphql@14.1.1
+-- graphql-code-generator@0.18.0
+-- html-webpack-plugin@3.2.0
+-- http-server@0.11.1
+-- jest@23.6.0
+-- node-sass@4.11.0
+-- node-sass-chokidar@1.3.4
+-- npm@6.8.0
+-- postcss@7.0.13
+-- postcss-cli@6.1.1
+-- react@16.6.3
+-- rimraf@2.6.2
+-- serve@10.1.2
+-- tsc@1.20150623.0
+-- typescript@3.2.1
+-- webpack@4.29.6
+-- webpack-cli@3.2.3
`-- webpack-dev-server@3.1.14

[ljharb]

I don’t believe the airbnb eslint config is compatible with CRA without ejecting - the dependency warnings you’re seeing mean that nothing can be expected to work until they’re fixed.

[baleeds]

I would say that's a possibility, but it's been working without issues for 6 months.

[baleeds]

Okay, I was able to fix it without ejecting. I'm pretty sure the warnings don't actually prevent this from working, in my case.

I added the following to my .eslintrc:

"parser": "babel-eslint",
"parserOptions": {
     "ecmaVersion": 6,
     "ecmaFeatures": {
         "jsx": true
     }
 },

[ljharb]

The airbnb config already sets those parserOptions - only the parser change is likely needed.