启用Webpack topLevelAwait及修复Redux注册Action报错求助

问题背景 #

我使用Axios对接后端实现用户注册功能，计划注册成功时dispatch REGISTER_SUCCESS，失败时dispatch REGISTER_FAILURE，并通过Redux Thunk中间件在箭头函数中调用dispatch。但目前出现top-level-await相关报错，尝试修改react-scripts的webpack.config.js后又引发其他错误，急需解决。

控制台错误信息 #

ERROR in ./src/action/auth.js
    [1] Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
    [1] File was processed with these loaders:
    [1]  * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
    [1]  * ./node_modules/babel-loader/lib/index.js
    [1]  * ./node_modules/source-map-loader/dist/cjs.js
    [1] You may need an additional loader to handle the result of these loaders.
    [1] Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
    [1]     at C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\dependencies\HarmonyDetectionParserPlugin.js:54:11
    [1]     at Hook.eval [as call] (eval at create (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:16)
    [1]     at Hook.CALL_DELEGATE [as _call] (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\tapable\lib\Hook.js:14:14)
    [1]     at JavascriptParser.walkAwaitExpression (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:2337:29)
    [1]     at JavascriptParser.walkExpression (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:2267:10)
    [1]     at JavascriptParser.walkVariableDeclaration (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:2121:33)
    [1]     at JavascriptParser.walkStatement (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:1615:10)
    [1]     at JavascriptParser.walkStatements (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:1476:9)
    [1]     at C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:1650:9
    [1]     at JavascriptParser.inBlockScope (C:\Users\krish\OneDrive\Desktop\udemy learning 2\dev-connector\client\node_modules\webpack\lib\javascript\JavascriptParser.js:3108:3)
    [1]
    [1] ERROR in [eslint]
    [1] src\action\auth.js
    [1]   Line 14:31:  Unexpected use of 'name'   no-restricted-globals
    [1]   Line 14:37:  'email' is not defined     no-undef
    [1]   Line 14:44:  'password' is not defined  no-undef
    [1]   Line 17:52:  'config' is not defined    no-undef
    [1]   Line 18:3:   'dispatch' is not defined  no-undef
    [1]   Line 26:29:  'dispatch' is not defined  no-undef
    [1]   Line 28:3:   'dispatch' is not defined  no-undef
      },

原代码问题分析 #

查看提供的auth.js文件，核心问题是代码结构错误，并非webpack配置问题：

• try/catch代码块和body变量定义写在了Redux Thunk的箭头函数外部，导致await出现在模块顶层，触发top-level-await报错
• 所有变量（name/email/password/config）和dispatch方法都在箭头函数内部作用域，外部无法访问，引发ESLint的未定义错误
• 调用SET_ALERT时写法错误，需要dispatch一个包含type和payload的对象，而非直接传参数

修正后的代码 #

import axios from 'axios';
import { SET_ALERT } from './types';
import { REGISTER_FAILURE, REGISTER_SUCCESS } from './types';

// Register
export const register = ({ name, email, password }) => async dispatch => {
  const config = {
    'Content-Type': 'application/json',
  };

  const body = JSON.stringify({ name, email, password });

  try {
    const res = await axios.post('/api/users', body, config);
    dispatch({
      type: REGISTER_SUCCESS,
      payload: res.data,
    });
  } catch (err) {
    const errors = err.response?.data?.errors;

    if (errors) {
      errors.forEach(error => 
        dispatch({
          type: SET_ALERT,
          payload: { msg: error.msg, alertType: 'danger' }
        })
      );
    }
    dispatch({
      type: REGISTER_FAILURE,
    });
  }
};

补充说明 #

1. 无需修改webpack配置：报错根源是代码结构错误，开启top-level-await是南辕北辙，修正代码结构后即可解决所有问题
2. 增加了可选链操作符?.：避免后端返回错误时err.response.data不存在导致的额外报错
3. 修正了SET_ALERT的dispatch格式：符合Redux action的标准结构，确保alert reducer能正确接收数据

内容的提问来源于stack exchange，提问作者Krishnadev. V