Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it

I am using axios to access the backend when a user registers, it takes their name, email, and password and dispatches REGISTER_SUCCESS when they are successful. When a user fails to register, it dispatches. for dispatch am using redux thunk as middleware so i can write dispatch in arrow function REGISTER_FAILURE, but instead gets the error below. This is stated in the webpack documentation.

topLevelAwait: Support the Top Level Await Stage 3 proposal, it makes the module an async module when await is used on the top-level. And it is enabled by default when experiments.futureDefaults is set to true.

But I don’t know how to implement this code. I have tried react-scripts webpack.config.js file, but I get another error. Can you please help?

ERROR IN CONSOLE

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 FILE

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

The problem was with the axios because we don’t need a config object for axios as the default headers in axios are already Content-Type: application/json also axios stringifies and parses JSON for you, so no need for JSON.stringify or JSON.parse

there is no need to write config file default headers in axios are already Content-Type: application/json

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

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

change my code to this here formdata contains email,name and 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,
   });
 }
}

Advertisement

Answer