Webpack顶层await未启用报错，求助是否需用craco解决

报错信息 #

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

背景情况 #

已将webpack安装为devDependency，在src目录下创建了webpack.config.js配置文件，尝试Stack Overflow相关问题的首个解决方案无效，询问是否需要使用craco。

解决方案 #

先排查基础配置问题 #

1. 检查webpack.config.js的配置是否正确
   必须在配置里明确开启顶级await，示例配置：

   module.exports = {
     // 其他已有配置
     experiments: {
       topLevelAwait: true,
     },
   };
   

2. 确认配置文件是否被webpack读取
   webpack默认加载项目根目录的webpack.config.js，如果你把配置放在src下，启动时需要指定路径，比如在package.json的scripts里改成：

   "scripts": {
     "start": "webpack serve --config src/webpack.config.js"
   }
   

是否需要用craco？ #

• 如果是Create React App（CRA）项目：CRA默认隐藏webpack配置，你在src下创建的配置文件根本不会生效，这时候必须用craco（或者react-app-rewired）来覆盖默认配置，在craco.config.js中添加webpack的experiments配置即可。
• 如果不是CRA项目：完全不需要用craco，只要搞定上面两个配置问题就行。

额外排查点 #

• 确保webpack版本是5.x：顶级await是webpack 5才支持的特性，4及以下版本直接升级webpack到5。
• 检查babel配置：如果babel有禁用顶级await的插件或设置，也会导致报错，确保babel配置没有相关限制。

内容的提问来源于stack exchange，提问作者Soham Saha Roy