Experiments topLevelAwait with craco is not working

Question

I am trying to implement topLevelAwait using CRACO while also adding some polyfills, but it does not detect the lines of code for the topLevelAwait setting. If I take out the lines of code for the polyfills I only get the polyfills error and not the topLevelAwait is not enabled error, if I add the lines for the polyfills, the polyfills work but I have the topLevelAwait is not enabled error.

This is what my craco.config.js file looks like:

module.exports = {
    webpack: {
      configure: {
        experiments: {
          topLevelAwait: true,
        },
      },
      
      configure: webpackConfig => {
        const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
          ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
        );

        webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
        webpackConfig['resolve'] = {
          fallback: {
            path: require.resolve("path-browserify"),
            crypto: require.resolve("crypto-browserify"),
            stream: require.resolve("stream-browserify"),
            'crypto-browserify': require.resolve('crypto-browserify'),
            os: require.resolve("os-browserify/browser"),
            url: require.resolve("url/"),
            assert: require.resolve("assert/"),
          },
        }
        return webpackConfig;
      },
    },
  };

All help is appreciated, thanks.

Answer 1

In case anyone ever runs into this error, here is what ended up working for me:

  module.exports = {
    webpack: {
  configure: webpackConfig => {

    //Configuration for the polyfills

    // Apply the fix for topLevelAwait
    webpackConfig.experiments = {
      ...webpackConfig.experiments,
      topLevelAwait: true,
    };

    return webpackConfig;
  },
},

};