在带有 Babel 的 ReactJS 上使用异步等待会导致错误：意外的令牌

Posted 2023-03-07

【中文标题】在带有 Babel 的 ReactJS 上使用异步等待会导致错误：意外的令牌

【英文标题】：Using async await on ReactJS with Babel leads to Error: Unexpected token

【发布时间】：2018-05-12 06:50:41

【问题描述】：

想在我的项目中使用 ES8 async/await。最近一直在 ReactNative 和 Expo 上使用它，所以没想到 ReactJS 会出现任何问题。虽然，该应用程序现在无法构建...... 这是我得到的错误：

    Syntax error: C:/projects/project1/src/containers/OfferOverview.js: Unexpected token (84:40)
      83 |
    > 84 |   initialGetProduct = async (productId) => 
         |                                         ^
      85 |     const  dispatch  = this.props;
      86 |     await dispatch(resetOfferStateAction());
      87 |     dispatch(getProductAction(productId));

这是组件，我已经删除了它的大部分内容，因为我怀疑它们可能与问题有关：

export class OfferOverview extends Component 
  componentWillMount() 
    this.initialGetProduct(this.props.location.query.product_id);
  

  // same error will be using async initialGetProduct() 
  initialGetProduct = async (productId) => 
    const  dispatch  = this.props;
    await dispatch(resetOfferStateAction());
    dispatch(getProductAction(productId));
    this.selectProduct(productId);
  

  render()  ... 

我尝试在 babel 配置中设置 es2017 预设，与使用“transform-async-to-generator”插件相同。这就是我在 .babelrc 文件中的内容：

  "presets": [
    "es2017",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-async-to-generator",
    "transform-class-properties",
    ["import",  "libraryName": "antd", "style": "css" ]
  ]

这是我的 eslint 配置。在 eslint 讨论中，他们说这是更多 babel-eslint 问题，尽管我添加了 parserOptions ecmaVersion = 2017：

module.exports = 
  root: true,

  parser: 'babel-eslint',

  // import plugin is termporarily disabled, scroll below to see why
  plugins: [/*'import', */'flowtype', 'jsx-a11y', 'react'],

  env: 
    browser: true,
    commonjs: true,
    node: true
  ,

  parserOptions: 
    ecmaVersion: 2017,
    sourceType: 'module',
    ecmaFeatures: 
      jsx: true,
      generators: true,
      experimentalObjectRestSpread: true
    
  ,

  settings: 
    'import/ignore': [
      'node_modules',
      '\\.(json|css|jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$',
    ],
    'import/extensions': ['.js'],
    'import/resolver': 
      node: 
        extensions: ['.js', '.json']
      
    
  ,

  rules:  ... 
;

和包json依赖：

"devDependencies": 
    "babel-cli": "^6.26.0",
    "babel-core": "^6.13.2",
    "babel-eslint": "^6.1.2",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.24.1",
    "coveralls": "^2.11.12",
    "eslint": "^3.2.2",
    "eslint-config-airbnb": "^10.0.0",
    "eslint-plugin-react": "^6.0.0",
    "ignore-styles": "^4.0.0",
    "istanbul": "^1.0.0-alpha.2",
    "mocha": "^3.0.2",
    "nock": "^8.0.0",
    "react-addons-test-utils": "^15.3.0",
    "react-scripts": "0.2.1",
    "redux-mock-store": "^1.1.2",
    "redux-saga-devtools": "^0.1.2"
,
"dependencies": 
    "babel-polyfill": "^6.26.0",
    "enzyme": "^2.4.1",
    "eslint-plugin-flowtype": "^2.39.1",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "expect": "latest",
    "isomorphic-fetch": "^2.2.1",
    "jsdom": "^9.9.1",
    "lodash": "^4.17.4",
    "nuka-carousel": "^2.3.0",
    "pushstate-server": "latest",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "react-router": "^2.6.0",
    "react-router-redux": "^4.0.8",
    "react-sidebar": "^2.3.2",
    "redux": "^3.6.0",
    "redux-logger": "3.0.1",
    "redux-saga": "^0.14.3"
,

如果有什么问题可以提示吗？

【问题讨论】：

我相信你需要 transform-class-properties Babel 插件

已将其添加到开发依赖项和 babelrc 插件中，但不幸的是它没有帮助

async initialGetProduct() 的确切错误是什么？因为没有箭头，所以不可能是完全相同的错误。

错误是一样的，虽然它指向行的另一个地方（因为不再有箭头）prntscr.com/hgge4i

@VMAtm：使用stage-2 将包括stage-3 和stage-4 (reference) 的预设——一个阶段预设将包括比它自己更大的所有阶段。 OP 也有 ES2017 预设，其中包括他们需要的功能，因为它包括 transform-async-to-generator Babel 插件 (reference)。但是，您的评论导致了 OP 的这一重要注意事项：stage-0 被配置为预设，但开发依赖项具有 stage-2 - 这种依赖项不匹配需要解决。

【参考方案1】：

所以问题出在与我想象的有点不同的地方。我正在使用 react-scripts 启动我的应用程序，我的错误是我认为我在项目中的配置（我不是最初启动它的人）已经以某种方式使用了。但事实并非如此。所以我要做的就是更新 react-scripts 版本。它是 0.2.1，现在是 ^1.0.17，难怪它不能与 ES8 一起使用...... 给大家带来的不便深表歉意，谢谢大家，你们的建议让我受益匪浅。 在 react-scripts 配置中，他们只有这个用于 babel：

          // Process JS with Babel.
          
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: 
              // @remove-on-eject-begin
              babelrc: false,
              presets: [require.resolve('babel-preset-react-app')],
              // @remove-on-eject-end
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            ,
          ,

【参考方案2】：

我没有运行代码，但您错误地声明了 initialGetProduct 函数。应该是

async initialGetProduct() ...

【讨论】：

如果我想要一个异步箭头函数怎么办？并且错误保持不变。