模块解析失败:未启用顶级等待实验(设置experiences.topLevelAwait:ttrue以启用它

Question

当用户注册时，我使用axios访问后端，它会获取他们的姓名、电子邮件和密码，并在成功时发送REGISTER_SUCCESS。当用户注册失败时，它会进行分派。对于dispatch，我使用redux thunk作为中间件，这样我就可以在箭头函数REGISTER_FAILURE中编写dispatch了，但却得到了下面的错误。这在webpack文档中有说明。

topLevelAwait：支持顶级Await第三阶段提案，它使在顶层使用等待时的异步模块。而且在experiences.futureDefault设置为true时默认启用。

但我不知道如何实现这段代码。我已经尝试过response脚本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:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibdependenciesHarmonyDetectionParserPlugin.js:54:11
[1]     at Hook.eval [as call] (eval at create (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_modulestapablelibHookCodeFactory.js:19:10), <anonymous>:7:16)
[1]     at Hook.CALL_DELEGATE [as _call] (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_modulestapablelibHook.js:14:14)
[1]     at JavascriptParser.walkAwaitExpression (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:2337:29)
[1]     at JavascriptParser.walkExpression (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:2267:10)
[1]     at JavascriptParser.walkVariableDeclaration (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:2121:33)
[1]     at JavascriptParser.walkStatement (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:1615:10)
[1]     at JavascriptParser.walkStatements (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:1476:9)
[1]     at C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:1650:9
[1]     at JavascriptParser.inBlockScope (C:UserskrishOneDriveDesktopudemy learning 2dev-connectorclientnode_moduleswebpacklibjavascriptJavascriptParser.js:3108:3)
[1]
[1] ERROR in [eslint]
[1] srcactionauth.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中的默认标头已经是内容类型：application/json也为您提供axios字符串并解析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,
});
}
}