模块解析失败:顶级等待实验未启用(将experiments.topLevelAwait: true设置为enabled )

Question

我正在使用axios访问后端时，当用户注册，它接受他们的名字，电子邮件和密码，并分发REGISTER_SUCCESS当他们是成功的。当用户注册失败时，它会分派。因为调度使用redux作为中间件，所以我可以用箭头函数REGISTER_FAILURE编写分派，但是会得到下面的错误。这一点在webpack的文件中有说明。

topLevelAwait:支持顶层等待阶段3的建议，它使模块在顶层使用时成为异步模块。默认情况下，当experiments.futureDefaults设置为true时，它将被启用。

但我不知道如何实现这段代码。我已经尝试了-脚本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文件

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(SET_ALERT(error.msg, 'danger')));
  }
  dispatch({
    type: REGISTER_FAILURE,
  });
}

Answer 1

问题在于axios，因为我们不需要axios的配置对象，因为axios中的默认标题已经是内容-Type: application/json也会为您解析JSON，所以不需要JSON.stringify或JSON.parse

不需要编写配置文件，axios中的默认头已经是内容类型: application/json

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

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

将我的代码更改为此处格式数据包含电子邮件、名称和密码

export const register = (formData) => async dispatch => {
 try {
   const res = await axios.post('/api/users',formData);
   dispatch({
     type: REGISTER_SUCCESS,
     payload: res.data,
   });
 } catch (err) {
   const errors = err.response.data.errors;

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