Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) React-Intl for translation

Question

Facing Below build issue:

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/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)

Any please provide some solution for this ?

score 27 · Accepted Answer · edited Jul 26 '22 at 08:13

27

I got this error when exporting a module with async. Just add this to the module.exports object in webpack.config.js file.

experiments: {
  topLevelAwait: true
}

You can also read up about the experiment option in Webpack documentation. https://webpack.js.org/configuration/experiments/

edited Jul 26 '22 at 08:13

Yoav Kadosh

4,807
4
39
56

answered Jun 22 '22 at 10:58

Bello Tomi

513
6
9

3

But where's the webpack.config.js file? Mine didn't come with one. Do I need to create one myself? – Hai Na Zheng Sep 03 '22 at 06:58
1

@HaiNaZheng yes you need to create one. You can do this by creating a new file called webpack.config.js I found the first half of this video helpful - https://www.youtube.com/watch?v=5IG4UmULyoA – Joshua Dance Sep 29 '22 at 23:37
@Bello Tomi To make this work, do we need to install craco package? – Shourya Shikhar Nov 05 '22 at 10:53
yes @ShouryaShikhar – Bello Tomi Nov 05 '22 at 12:16
`experiments:` was introduced in Webpack 5 – Boris Verkhovskiy Jan 08 '23 at 04:45
HOw to enabee top level await in gatsby.js ? – Lakshmi Apr 28 '23 at 06:58

score 16 · Answer 2 · edited Jan 04 '23 at 22:59

16

Here's a workaround for those coming from Next.js source

/** @type {import("next").NextConfig} */
module.exports = {
  experimental: { appDir: true },
  webpack(config) {
    config.experiments = { ...config.experiments, topLevelAwait: true }
    return config
  },
}

edited Jan 04 '23 at 22:59

atasoyh

3,045
6
31
57

answered Jan 04 '23 at 18:23

igmrrf

459
4
11

A question though, what does this do and what side effects does it have? – kotAPI Mar 11 '23 at 05:57
a module can include an await in the code that executes at startup by factoring that code into an async function. – igmrrf May 04 '23 at 18:13

score 4 · Answer 3 · answered Oct 17 '22 at 10:11

You can enable it in your webpack config.

If you created your react app with npx create-react-app my-app you have to install CRACO to override your webpack config.

After installation set topLevelAwait to true in your craco.config.js:

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

Run npm start and the error is gone.

score 1 · Answer 4 · answered Nov 07 '22 at 15:16

Symfony

For anyone else trying to add this to the webpack.config.js generated by symfony, you can use the following syntax:

// Default config above...

const config = Encore.getWebpackConfig();

config.experiments = {
  topLevelAwait: true,
}

module.exports = config;

score 1 · Answer 5 · answered Aug 01 '23 at 09:37

Starting from webpack version 5.83.0, this feature [experiments.topLevelAwait] is enabled by default. (see https://webpack.js.org/configuration/experiments/#experimentstoplevelawait)

So as alternative to the experiments option, you can upgrade webpack. I had to eject my react app to upgrade. (What does this "react-scripts eject" command do?)

Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it) React-Intl for translation

5 Answers5

Linked