Search code examples
javascriptnode.jsasync-awaitcreate-react-app

Async named arrow fucntion Error 'Unexpected token'

I am learning React, using create-react-app. There was a situation that Google could not solve. Where am I wrong? How to fix it?

I don’t understand why my code works on codepen.io. https://codepen.io/VaskaDeGame/pen/zQzeGM But does not work on the local machine :(

const getResource = async (url) => {
    const res = await fetch(url);
    return res.json();
};
getResource('https://swapi.co/api/people/1/')
    .then((body) => {
        console.log(body);
    });

Module build failed: SyntaxError: Z:/projects/vdg_swapi/src/index.js: Unexpected token (10:32)
   8 | );
   9 | 
> 10 | const getResource = async (url) => {
     |                                 ^
  11 |     const res = await fetch(url);
  12 |     return res.json();
  13 | };
    at Parser.pp.raise (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\location.js:22:13)
    at Parser.pp.unexpected (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\util.js:89:8)
    at Parser.pp.parseAsyncArrowFromCallExpression (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:369:47)
    at Parser.parseAsyncArrowFromCallExpression (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\plugins\flow.js:389:20)
    at Parser.pp.parseSubscripts (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:320:21)
    at Parser.pp.parseExprSubscripts (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:287:15)
    at Parser.pp.parseMaybeUnary (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:257:19)
    at Parser.pp.parseExprOps (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:188:19)
    at Parser.pp.parseMaybeConditional (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:165:19)
    at Parser.pp.parseMaybeAssign (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\expression.js:128:19)
    at Parser.parseMaybeAssign (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\plugins\flow.js:460:20)
    at Parser.pp.parseVar (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\statement.js:601:24)
    at Parser.pp.parseVarStatement (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\statement.js:424:8)
    at Parser.pp.parseStatement (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\statement.js:120:19)
    at Parser.parseStatement (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\plugins\flow.js:30:22)
    at Parser.pp.parseBlockBody (Z:\projects\vdg_swapi\node_modules\react-scripts\node_modules\babylon\lib\parser\statement.js:529:21)
 @ multi main
errors @ client:47

package.json

{
  "name": "swapi",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-scripts": "0.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject"
  }
}

Node version: v12.2.0

What is interesting, if you run this code in Google Chrome browser, then it will run without errors.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>VDG SWAPI</title>
      <link rel="stylesheet" href="https://bootswatch.com/4/slate/bootstrap.min.css">
  </head>
  <body>
    <div id="root"></div>
    <script>
      getResource = async (url) => {
        const res = await fetch(url);
        return res.json();
      };
      getResource('https://swapi.co/api/people/1/')
              .then((body) => {
                console.log(body);
              });

    </script>
  </body>
</html>
Solution

  • I can see you have a very old version of what looks like the create-react-app. The dependencies in one I created 2 months ago are 

    "react": "^16.8.3",
"react-dom": "^16.8.3",
"react-scripts": "2.1.5",

    These dependencies in turn depend on specific version of the babel transpiller. Could you check your package-lock.json to see what version of babel you are using? I you are using below 7 you may want to either upgrade your dependencies or add the arrow function support. see https://babeljs.io/docs/en/babel-plugin-transform-es2015-arrow-functions