Parsing error unexpected token expected react

Tell us about your environment

• ESLint Version: 4.10.0
• Node Version: 8.10.0
• npm Version: 5.6.0

What parser (default, Babel-ESLint, etc.) are you using? babel-eslint

Please show your full configuration:

Configuration

{
  "extends": [
    "react-app",
    "plugin:flowtype/recommended",
    "plugin:jest/recommended",
    "prettier"
  ],
  "parser": "babel-eslint",
  "plugins": ["flowtype", "jest", "prettier"],
  "env": {
    "browser": true
  },
  "overrides": [
    {
      "files": ["src/**/*.spec.js"],
      "env": {
        "jest": true
      }
    }
  ],
  "rules": {
    "comma-dangle": ["error", "never"],
    "no-underscore-dangle": ["error", { "allowAfterThis": true }],
    "max-len": ["error", { "ignoreTrailingComments": true, "code": 100 }],
    "react/jsx-filename-extension": 0,
    "react/sort-comp": [
      "error",
      {
        "order": [
          "type-annotations",
          "state",
          "defaultProps",
          "static-methods",
          "lifecycle",
          "everything-else",
          "render"
        ]
      }
    ],
    "react/require-default-props": "off",
    "react/jsx-wrap-multilines": "off",
    "react/jsx-indent": "off",
    "react/jsx-indent-props": "off",
    "react/jsx-closing-bracket-location": "off",
    "class-methods-use-this": "off",
    "no-global-assign": 2,
    "no-param-reassign": "off",
    "no-plusplus": "off",
    "no-console": "error",
    "prettier/prettier": "error",
    "camelcase": [1, { "properties": "always" }],
    "no-unused-vars": [2, { "args": "after-used", "ignoreRestSiblings": true }]
  }
}

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

import React from "react";

const ChatWidget = () => {
  return (
    <script>
      window.fcWidget.init({
        token: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
        host: "https://wchat.freshchat.com"
      });
    </script>
  );
};

export default ChatWidget;

which runs eslint src --max-warnings=0

What did you expect to happen?
I expected eslint to not flag anything.

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

yarn run v1.7.0
$ eslint src --max-warnings=0

/Users/justinbrown/Sync/code/iu-react/src/components/ChatWidget/index.js
  7:14  error  Parsing error: Unexpected token, expected }

   5 |     <script>
   6 |       window.fcWidget.init({
>  7 |         token: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
     |              ^
   8 |         host: "https://wchat.freshchat.com"
   9 |       });
  10 |     </script>

✖ 1 problem (1 error, 0 warnings)

error Command failed with exit code 1.

Notes
I’ve looked through a number of Stack posts as well as issues posted on this repo. I’ve tried setting ecmaVersion explicitly as well as other suggestions as proposed in posts like: https://stackoverflow.com/questions/37918769/eslint-parsing-error-unexpected-token and #10369

How To Fix – “Parsing error: Unexpected Token” in React.js or Javascript ?

How To Fix – “Parsing error: Unexpected Token” in React.js or Javascript ?

In this post, we will explore – How To Fix – “Parsing Error: Unexpected Token” in React.

Such “Unexpected token” signify a common behavioural problem – somewhere in your code a specific construct was supplied, but the system expected something completely different (based on defined rulescustoms). This could be due to a typo mistake, missing something in the code etc. Also could be dev environment and ESLint parsing styles are not compatible owing to the changes for various or upgraded versions.

Before we try to fix, Let’s do some primitive checks to pinpoint some of the symptoms.

Primitive Check:

• What version of React are you using ?
• Have you considered and cross-checked that you have correctly “imported” everything ?
• Are you able to compile your code using Babel ?
• Have you tried babel-eslint parser – the newer name is @babel/eslint-parser
• Does it work in the Browser ?

Once you have been through all the above pointers, try the below options.

Try the latest babel eslint and make sure you follow the compatibility matrix.

Node version preferably should be 8+.

• Do the install. The “x.x” & “y” below has to be substituted appropriately as per the above table.

• Go to the .eslintrc (or .eslintrc.json) config file and make the below changes.

Also check what value you have in “.babelrc”.

If above doesn’t work, you could also try,

• If applicable, go to your package.json file and check the below.

• You might have two files in your system. There are different versions of ecmaScript with the same name,
  • .eslintrc.js -> es6: true – which was released on June 2015
  • .eslintrc.json -> “ecmaVersion”: 2017 – which is equivalent to es8

If the wrong ecmaScript is being picked up in your case, you can try removing the “.eslintrc.js” file (so as to avoid the conflict) and see if that helps to solve the error.

• You can also try changing the ecmaVersion in the .eslintrc.json file.

You could also try other values like 2017, 2018 instead of 2020

You can use one of the below ecmaVersion value to specify what version of ECMAScript syntax to use-

Источник

Parsing error: Unexpected token, expected > #10628

Tell us about your environment

• ESLint Version: 4.10.0
• Node Version: 8.10.0
• npm Version: 5.6.0

What parser (default, Babel-ESLint, etc.) are you using? babel-eslint

Please show your full configuration:

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

which runs eslint src —max-warnings=0

What did you expect to happen?
I expected eslint to not flag anything.

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

Notes
I’ve looked through a number of Stack posts as well as issues posted on this repo. I’ve tried setting ecmaVersion explicitly as well as other suggestions as proposed in posts like: https://stackoverflow.com/questions/37918769/eslint-parsing-error-unexpected-token and #10369

The text was updated successfully, but these errors were encountered:

Hi, thanks for creating an issue.

This is happening because your syntax is invalid. It looks like you’re trying to use an inline tag as a JSX element, but tags in JSX don’t work quite the same way that they do in HTML (for example, still have to follow JSX syntax, so they can’t contain arbitrary JavaScript code).

As an immediate fix for your problem to get your code to parse, if you just want that code to run whenever your component is rendered, you could omit the tag and simply do something like this:

As a more long-term fix, it generally isn’t good practice for React components to have side-effects when rendering. Instead, you could initialize the widget in a componentDidMount method, with something like this:

Источник

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!