Question

我正在使用create-react-app学习React。 Google存在无法解决的情况。我哪里错了？如何解决？

我不明白为什么我的代码可以在codepen.io上运行。 https://codepen.io/VaskaDeGame/pen/zQzeGM 但不适用于本地计算机：（

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"
  }
}

节点版本：v12.2.0

有趣的是，如果您在Google Chrome浏览器中运行此代码，那么它将在没有错误的情况下运行。

<!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>

Answer 1

我可以看到您使用的是create-react-app的旧版本。我2个月前创建的依赖项是

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

这些依赖关系又取决于babel Transpiller的特定版本。您可以检查package-lock.json来查看使用的babel版本吗？如果您使用的是7以下版本，则可能要升级依赖项或添加箭头功能支持。参见https://babeljs.io/docs/en/babel-plugin-transform-es2015-arrow-functions

异步命名箭头功能错误“意外令牌”

1 个答案: