1

I am trying to execute a simple function. But eslient tells me that I have a Parsing error: Unexpected token.


export class SomeComponent extends Component {

function foo () { console.log ("hello") return }

  render() {

    return (
      <React.Fragment>
      
      </React.Fragment>
    );
  }
}

I saw in other posts that the problem might lie in my package configuration. That is why I also provide the configuration here:

{
  "name": "test-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@material-ui/core": "^4.10.2",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.28",
    "@types/react": "^16.9.21",
    "@types/react-dom": "^16.9.5",
    "@types/react-router-dom": "^5.1.3",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "classnames": "^2.2.6",
    "d3-ease": "^1.0.6",
    "html-react-parser": "^0.10.3",
    "html-to-react": "^1.4.2",
    "i": "^0.3.6",
    "install": "^0.13.0",
    "jquery": "^3.4.1",
    "material-kit-react": "^1.8.0",
    "mdbreact": "^4.25.5",
    "npm": "^6.14.6",
    "prop-types": "^15.7.2",
    "pure-react-carousel": "^1.26.1",
    "react": "^16.12.0",
    "react-alert": "^6.0.1",
    "react-alert-template-basic": "^1.0.0",
    "react-audio-player": "^0.11.1",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-bootstrap-carousel": "^4.0.3",
    "react-card-carousel": "^1.1.3",
    "react-dom": "^16.12.0",
    "react-geocode": "^0.2.1",
    "react-google-autocomplete": "^1.1.2",
    "react-google-maps": "^9.4.5",
    "react-h5-audio-player": "^2.4.2",
    "react-image-appear": "^1.2.23",
    "react-loader-spinner": "^3.1.14",
    "react-loading-image": "^0.5.0",
    "react-redux": "^7.2.0",
    "react-redux-loading-bar": "^5.0.0",
    "react-reveal": "^1.2.2",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-scroll": "^1.7.9",
    "react-select": "^3.1.0",
    "react-slick": "^0.23.1",
    "react-split-pane": "^2.0.3",
    "react-transition-group": "^4.3.0",
    "react-user-profile": "^1.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "styled-components": "^5.0.1",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.10.3",
    "babel-eslint": "^10.1.0",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.6"
  }
}

I followed the following post and installed babel eslient via yarn add -D babel-eslint. However, afterwards react was giving me the error that I installed an incompatible babel eslient version and I had to reinstall all packages again.

FSDford
  • 448
  • 5
  • 10
dan_boy
  • 1,735
  • 4
  • 19
  • 50

1 Answers1

1

Are you trying to use class or functional components, you have some errors in your code.

Class components should look like this:


class ClassComponent extends React.Component {
   constructor(props) {
     super(props)
     // state here
   }

  printMessage = (msg) => {
    console.log(msg);
  };

  render() {
    this.printMessage("Hello World");

    return <div>jsx here</div>;
  }
}

Functional components should look like this:

function FunctionalComponent(props) {
  const printMessage = (msg) => {
    console.log(msg);
  };

  printMessage()
  return <div>jsx here</div>;
}
Kyle Lambert
  • 369
  • 2
  • 13