how to enable top level await in reactjs

I have installed craco using yarn add @craco/craco I have also replaced the scritps and have created a craco.config.js

module.exports = {
    webpack: {
        experiments: {
            topLevelAwait: true
        }
    }
}

but when I’m trying to use await at top level I’m still getting this error in my react app

ERROR in ./src/Enforcer.js

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
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)
    at /home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/dependencies/HarmonyDetectionParserPlugin.js:54:11
    at Hook.eval [as call] (eval at create (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:16)
    at Hook.CALL_DELEGATE [as _call] (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/tapable/lib/Hook.js:14:14)
    at JavascriptParser.walkAwaitExpression (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/javascript/JavascriptParser.js:2337:29)
    at JavascriptParser.walkExpression (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/javascript/JavascriptParser.js:2267:10)
    at JavascriptParser.walkVariableDeclaration (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/javascript/JavascriptParser.js:2121:33)
    at JavascriptParser.walkStatement (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/javascript/JavascriptParser.js:1615:10)
    at JavascriptParser.walkStatements (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/javascript/JavascriptParser.js:1476:9)
    at JavascriptParser.parse (/home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/javascript/JavascriptParser.js:3370:9)
    at /home/shivansh/Desktop/dev/os-2/casbin-core/test/reactjs/node_modules/webpack/lib/NormalModule.js:1087:26

Answer

In the craco docs, it says you need to add a configure block to handle any webpack configuration options

What happens if you change

module.exports = {
    webpack: {
        experiments: {
            topLevelAwait: true
        }
    }
}

module.exports = {
      // ...
      webpack: {
        configure: {
          experiments: {
              topLevelAwait: true
          }
        }
      }
}

Advertisement

Answer