执行yarn build报错：await关键字不能在async函数外部使用

问题详情 #

之前yarn build一直正常，突然出现编译失败，报错核心是yoga-layout模块中存在await关键字在async函数外使用的语法问题，完整执行日志如下：

$ yarn run build
yarn run v1.22.22
$ yarn del src/**/*.generated.tsx && yarn codegen:generate
$ /home/project/frontend/node_modules/.bin/del 'src/**/*.generated.tsx'
$ graphql-codegen --config codegen.yml
  ✔ Parse configuration
  ✔ Generate outputs
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./node_modules/yoga-layout/dist/src/index.js 13:26
Module parse failed: Cannot use keyword 'await' outside an async function (13:26)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import loadYoga from '../binaries/yoga-wasm-base64-esm.js';
| import wrapAssembly from "./wrapAssembly.js";
> const Yoga = wrapAssembly(await loadYoga());
| export default Yoga;
| export * from "./generated/YGEnums.js";


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

可行的解决方法 #

• 锁定yoga-layout稳定版本
  这个问题大多是yoga-layout新版本引入了顶级await语法，但你的构建环境不支持。打开package.json，将yoga-layout锁定到兼容的版本，比如：

  "yoga-layout": "~3.1.0"
  

  执行yarn install重新安装依赖后再尝试构建。

• 强制指定依赖版本
  用yarn why yoga-layout查看是哪个依赖间接升级了yoga-layout，然后在package.json中添加resolutions强制指定版本：

  "resolutions": {
    "yoga-layout": "3.1.0"
  }
  

  之后执行yarn install更新依赖。

• 升级构建工具
  如果你的项目使用的是旧版react-scripts，升级到支持顶级await的版本（如react-scripts@5及以上）：

  yarn upgrade react-scripts@latest
  

  注意升级后可能需要处理其他依赖的兼容性问题。

内容的提问来源于stack exchange，提问作者ewerton